<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Up in the Air]]></title><description><![CDATA[Up in the Air]]></description><link>https://blog.ericli.ca</link><image><url>https://cdn.hashnode.com/res/hashnode/image/upload/v1616998212183/iDAeqYfBv.png</url><title>Up in the Air</title><link>https://blog.ericli.ca</link></image><generator>RSS for Node</generator><lastBuildDate>Mon, 25 May 2026 08:57:19 GMT</lastBuildDate><atom:link href="https://blog.ericli.ca/rss.xml" rel="self" type="application/rss+xml"/><language><![CDATA[en]]></language><ttl>60</ttl><item><title><![CDATA[Use DropzoneJS with Laravel8]]></title><description><![CDATA[1. Download and install
<link href="/css/dropzone.min.css" rel="stylesheet">
<script src="/js/dropzone.min.js"></script>
2. Add class to a div
<input type="hidden" name="photo" id="photo">
<div id="upload" class="dropzone"></div>

3. Create options f...]]></description><link>https://blog.ericli.ca/use-dropzonejs-with-laravel8</link><guid isPermaLink="true">https://blog.ericli.ca/use-dropzonejs-with-laravel8</guid><category><![CDATA[Laravel]]></category><dc:creator><![CDATA[Eric Li]]></dc:creator><pubDate>Thu, 08 Apr 2021 05:16:47 GMT</pubDate><enclosure url="https://cdn.hashnode.com/res/hashnode/image/upload/v1617859726742/pw7_AiJML.png" length="0" type="image/jpeg"/><content:encoded><![CDATA[<h2 id="1-download-and-install">1. Download and install</h2>
<pre><code><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/css/dropzone.min.css"</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"/js/dropzone.min.js"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre><h2 id="2-add-class-to-a-div">2. Add class to a div</h2>
<pre><code>&lt;<span class="hljs-keyword">input</span> <span class="hljs-keyword">type</span>="hidden" <span class="hljs-type">name</span>="photo" id="photo"&gt;
&lt;div id="upload" <span class="hljs-keyword">class</span>="dropzone"&gt;&lt;/div&gt;
</code></pre><p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1617858314114/rbTrnAdTS.png" alt="image.png" /></p>
<h2 id="3-create-options-for-dropzonejs">3. Create options for DropzoneJS</h2>
<pre><code>Dropzone.options.upload = {
        <span class="hljs-attr">url</span>: <span class="hljs-string">"/upload"</span>,
        <span class="hljs-attr">paramName</span>: <span class="hljs-string">"file"</span>,
        <span class="hljs-attr">maxFilesize</span>: <span class="hljs-number">2</span>,
        <span class="hljs-attr">maxFiles</span>: <span class="hljs-number">1</span>,
        <span class="hljs-attr">acceptedFiles</span>: <span class="hljs-string">".jpeg,.jpg,.png,.gif"</span>,
        <span class="hljs-attr">sending</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">file, xhr, formData</span>) </span>{
            formData.append(<span class="hljs-string">"_token"</span>, <span class="hljs-string">"{{ csrf_token() }}"</span>);
        },
        <span class="hljs-attr">success</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">file, response</span>) </span>{
            <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'photo'</span>).value = response.data.url;
        }

    };
</code></pre><h2 id="4-save-the-file-on-the-backend">4. Save the file on the backend</h2>
<pre><code><span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">upload</span>(<span class="hljs-params">Request $request</span>)
    </span>{
        $file = $request-&gt;file(<span class="hljs-string">'file'</span>);
        $fileName = time() . <span class="hljs-string">'.'</span> . $file-&gt;extension();
        $file-&gt;move(public_path(<span class="hljs-string">'images'</span>), $fileName);
        <span class="hljs-keyword">return</span> response()-&gt;json([<span class="hljs-string">'message'</span> =&gt; <span class="hljs-string">'success'</span>, <span class="hljs-string">'data'</span> =&gt; [<span class="hljs-string">'url'</span> =&gt; $fileName]]);
    }
</code></pre>]]></content:encoded></item></channel></rss>