<p>I had a problem finding the <code>folderId</code> as I was using the <code>sourceId</code> from looking at Asset Sources in the CMS. </p>

<p>To get the <code>folderId</code>, I had to check the database and look in the <code>craft_assetfolders</code> folder. This will then give you the <code>folderId</code> for a particular Asset Source.</p>

CC BY-SA 3.0
2017-11-15T14:59:27.807Z
2017-11-15T14:59:27.807Z
Jason Mayo
<p>OK, figured it out (or at least it works, so correct me if a better way is available):
This method assumes logged in frontend users, not sure if it's possible for guests, have not tested that. Might give permission errors.</p>
<p>Let's say, we have a section <em>message</em> with id 2, containing an asset field called <em>photos</em>. This is the field in which we want to save all frontend uploaded images.</p>
<p>In your form template, do everything exactly as <a href="http://buildwithcraft.com/docs/templating/entry-form" rel="noreferrer">this doc page</a> says. Beware of the fact that you're own fields input names should start with 'fields[myFieldHandle]', and default fields such as title and author should just have their handle as input name.</p>
<p>Also, make sure your form has <em>enctype=&quot;multipart/form-data&quot;</em> in its tag. What you have now, should look like this:</p>
<pre><code>&lt;form action=&quot;&quot; method=&quot;POST&quot; enctype=&quot;multipart/form-data&quot;&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;action&quot; value=&quot;entries/saveEntry&quot; /&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;sectionId&quot; value=&quot;2&quot; /&gt;
    &lt;input type=&quot;hidden&quot; name=&quot;enabled&quot; value=&quot;1&quot; /&gt;

    &lt;input type=&quot;file&quot; name=&quot;assets-upload&quot; multiple /&gt;

    &lt;input type=&quot;submit&quot; value=&quot;Make it work!&quot; /&gt;
&lt;/form&gt;
</code></pre>
<p>You'll notice that the file input field has 'assets-upload' as its name. You can either do this, or make your uploading mechanism change the field name to 'assets-upload' for you, because Craft assumes this name in the controller class you're about to use.</p>
<p>For my form, I used the excellent Jquery File Upload plugin, which starts to do its work once files are selected in the file input field. I'm sure any other plugin could do the same. Make sure the plugin uploads the files to Craft's assets/uploadFile controller for them to be processed. The only thing this controller needs, is a folderId (the id of the asset folder the assets should be copied to). So, this is what the upload plugin needs:</p>
<pre><code>$('#assets-upload').fileupload({
    url: '{{ url(actions/assets/uploadFile) }}',
    dataType: 'json',
    formData: [{ name: 'folderId', value: yourfolderId}],
});
</code></pre>
<p>By now, you should be able to have your plugin send one or more assets to Craft's controller. Use firebug or Chrome's devTools to see what is returned. If everything worked as it should, a json-string should be returned containing the fileId(s) of the uploaded file(s).
The only thing left to do then, is creating hidden input fields to tell Craft which assets to relate to this entry. What JavaScript should append to the form, is one or more instances of:</p>
<pre><code>&lt;input type=&quot;hidden&quot; name=&quot;fields[photos][]&quot; value=&quot;yourFileId&quot; /&gt;
</code></pre>
<p><strong>Example, using the 'done' callback function in JQuery File upload:</strong></p>
<pre><code>...
done: function (e, data) {
    if(data.result.success) {
        var fileId = data.result.fileId;
        $(this).after('&lt;input type=&quot;hidden&quot; name=&quot;fields[photos][]&quot; value=&quot;' + fileId + '&quot; /&gt;');
    }
},
...
</code></pre>
<p>Submit your form, and see if it works. It should. If not, use the errors Craft returns to solve your problems (quite possibly permission-related).</p>
<p><em>Final note: My asset field is set to create a different file folder for each entry. In this case, I created a temporary folder and used its ID in the frontend form (because the folder is only created once the entry is saved). Craft will copy the assets to the right place and clean out this temp folder on saving the entry.</em></p>

CC BY-SA 3.0
2017-05-16T12:18:19.143Z
Hi Paul. Any chance you've got a working version of this I can see somewhere? I can't get past the 500 errors.
Clive Portman
CC BY-SA 3.0
2017-05-31T17:12:45.137Z
I've got this working but am concerned that any user can directly upload to the assets folder anything they want. There's no backend validation.
Clive Portman
CC BY-SA 3.0
2017-06-01T17:33:22.990Z
Clive, any user CAN upload files to your designated assets folder, but you could remove execution permissions for files within your assets folders. Or write some logic in a small plugin to handle file uploads yourself ...
Paul
CC BY-SA 3.0
2017-09-11T14:12:15.030Z
Do someone have any idea to avoid these permissions issues? Even using Guest Entries's plugin from Pixel&Tonic I'm getting a 403 (Forbidden) after each file upload.
Romain P.
CC BY-SA 3.0
2014-08-26T09:09:24.333Z
5 stars!!! great work!
Johannes Lamers
CC BY-SA 3.0
2014-08-26T14:15:00.817Z
My upload field returns an error 500.

My temp folder ID = 4. 

Is this oke?
formData: [{ name: 'folderId', value: '4'}],
Johannes Lamers
CC BY-SA 3.0
2014-08-26T14:16:16.743Z
Johannes, when do you get the 500, and don't you get an error message? Can I see it somewhere?
Paul
CC BY-SA 3.0
2014-08-26T14:45:17.527Z
Johannes, the field of which you send the value to that controller, should have the name 'assets-upload'. Craft is now looking for that field, but can not find it.
Paul
CC BY-SA 3.0
2014-08-26T14:45:59.057Z
Yep! Thank you...
Johannes Lamers
CC BY-SA 3.0
2014-08-26T14:49:48.693Z
Can you share the javascript part where the FileID hidden input is appended to the form?
Johannes Lamers
CC BY-SA 3.0
2014-08-26T14:54:21.990Z
Just edited the answer to include that JavaScript part
Paul
CC BY-SA 3.0
2014-10-15T23:45:39.550Z
Paul, did this solution also include the ability to add a Title to the image asset upon upload?
Brendan Underwood
CC BY-SA 3.0
2014-08-26T09:04:38.430Z
2014-08-26T14:54:01.860Z
2020-06-17T08:56:27.903Z
Paul
<p>I'm trying to create a frontend entry form for a logged in user, with a field to upload multiple assets to that entry.</p>
<p>I've tried using the <a href="http://blueimp.github.io/jQuery-File-Upload/" rel="noreferrer">Jquery FileUpload plugin</a>, but can't seem to get that working.</p>
<p><strong>The situation:</strong></p>
<ul>
<li>The entry type contains an Asset Field, called photos. This field creates a new folder based on the entry's ID;</li>
<li>Users have to be able to select multiple images, with a nice process-bar showing while uploading;</li>
<li>I've tried uploading directly to actions/assets/uploadFile, but I get a permission error;</li>
</ul>
<p>Does anyone have something similar working with Craft?</p>

<assets><form><entry>
Does anyone have a working example of frontend form with multiple file upload, drag & drop etc?
# Does anyone have a working example of frontend form with multiple file upload, drag & drop etc?

(Asked by: username_0 on 2014-08-22)

I'm trying to create a frontend entry form for a logged in user, with a field to upload multiple assets to that entry.

I've tried using the [Jquery FileUpload plugin](http://blueimp.github.io/jQuery-File-Upload/), but can't seem to get that working.

**The situation:**

* The entry type contains an Asset Field, called photos. This field creates a new folder based on the entry's ID;
* Users have to be able to select multiple images, with a nice process-bar showing while uploading;
* I've tried uploading directly to actions/assets/uploadFile, but I get a permission error;

Does anyone have something similar working with Craft?

**Tags:** assets, form, entry

---

## 2 answers

### Answer by username_0 on 2014-08-26. Score: 18 | Accepted answer

OK, figured it out (or at least it works, so correct me if a better way is available):
This method assumes logged in frontend users, not sure if it's possible for guests, have not tested that. Might give permission errors.
Let's say, we have a section message with id 2, containing an asset field called photos. This is the field in which we want to save all frontend uploaded images.
In your form template, do everything exactly as this doc page says. Beware of the fact that you're own fields input names should start with 'fields[myFieldHandle]', and default fields such as title and author should just have their handle as input name.
Also, make sure your form has enctype="multipart/form-data" in its tag. What you have now, should look like this:

    
    
    

    

    


You'll notice that the file input field has 'assets-upload' as its name. You can either do this, or make your uploading mechanism change the field name to 'assets-upload' for you, because Craft assumes this name in the controller class you're about to use.
For my form, I used the excellent Jquery File Upload plugin, which starts to do its work once files are selected in the file input field. I'm sure any other plugin could do the same. Make sure the plugin uploads the files to Craft's assets/uploadFile controller for them to be processed. The only thing this controller needs, is a folderId (the id of the asset folder the assets should be copied to). So, this is what the upload plugin needs:
$('#assets-upload').fileupload({
    url: '{{ url(actions/assets/uploadFile) }}',
    dataType: 'json',
    formData: [{ name: 'folderId', value: yourfolderId}],
});

By now, you should be able to have your plugin send one or more assets to Craft's controller. Use firebug or Chrome's devTools to see what is returned. If everything worked as it should, a json-string should be returned containing the fileId(s) of the uploaded file(s).
The only thing left to do then, is creating hidden input fields to tell Craft which assets to relate to this entry. What JavaScript should append to the form, is one or more instances of:


Example, using the 'done' callback function in JQuery File upload:
...
done: function (e, data) {
    if(data.result.success) {
        var fileId = data.result.fileId;
        $(this).after('');
    }
},
...

Submit your form, and see if it works. It should. If not, use the errors Craft returns to solve your problems (quite possibly permission-related).
Final note: My asset field is set to create a different file folder for each entry. In this case, I created a temporary folder and used its ID in the frontend form (because the folder is only created once the entry is saved). Craft will copy the assets to the right place and clean out this temp folder on saving the entry.

> **Comments:**
> **username_4**: 5 stars!!! great work!  
> **username_4**: My upload field returns an error 500.  My temp folder ID = 4.   Is this oke? formData: [{ name: 'folderId', value: '4'}],  
> **username_0**: Johannes, when do you get the 500, and don't you get an error message? Can I see it somewhere?  
> **username_0**: Johannes, the field of which you send the value to that controller, should have the name 'assets-upload'. Craft is now looking for that field, but can not find it.  
> **username_4**: Yep! Thank you...  
> **username_4**: Can you share the javascript part where the FileID hidden input is appended to the form?  
> **username_0**: Just edited the answer to include that JavaScript part  
> **username_5**: Paul, did this solution also include the ability to add a Title to the image asset upon upload?  
> **username_2**: Hi Paul. Any chance you've got a working version of this I can see somewhere? I can't get past the 500 errors.  
> **username_2**: I've got this working but am concerned that any user can directly upload to the assets folder anything they want. There's no backend validation.  
> **username_0**: Clive, any user CAN upload files to your designated assets folder, but you could remove execution permissions for files within your assets folders. Or write some logic in a small plugin to handle file uploads yourself ...  
> **username_3**: Do someone have any idea to avoid these permissions issues? Even using Guest Entries's plugin from Pixel&Tonic I'm getting a 403 (Forbidden) after each file upload.  

---

### Answer by username_1 on 2017-11-15. Score: 2

I had a problem finding the `folderId` as I was using the `sourceId` from looking at Asset Sources in the CMS.

To get the `folderId`, I had to check the database and look in the `craft_assetfolders` folder. This will then give you the `folderId` for a particular Asset Source.


---

