Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-11-15T14:59:27.807Z
Answers.LastActivityDate: 2017-11-15T14:59:27.807Z
Answers.UserDisplayName: Jason Mayo
Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-16T12:18:19.143Z
Answers.Text: Hi Paul. Any chance you've got a working version of this I can see somewhere? I can't get past the 500 errors.
Answers.UserDisplayName: Clive Portman
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-05-31T17:12:45.137Z
Answers.Text: 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.
Answers.UserDisplayName: Clive Portman
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-06-01T17:33:22.990Z
Answers.Text: 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 ...
Answers.UserDisplayName: Paul
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-09-11T14:12:15.030Z
Answers.Text: 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.
Answers.UserDisplayName: Romain P.
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-26T09:09:24.333Z
Answers.Text: 5 stars!!! great work!
Answers.UserDisplayName: Johannes Lamers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-26T14:15:00.817Z
Answers.Text: My upload field returns an error 500.
  
  My temp folder ID = 4. 
  
  Is this oke?
  formData: [{ name: 'folderId', value: '4'}],
Answers.UserDisplayName: Johannes Lamers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-26T14:16:16.743Z
Answers.Text: Johannes, when do you get the 500, and don't you get an error message? Can I see it somewhere?
Answers.UserDisplayName: Paul
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-26T14:45:17.527Z
Answers.Text: 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.
Answers.UserDisplayName: Paul
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-26T14:45:59.057Z
Answers.Text: Yep! Thank you...
Answers.UserDisplayName: Johannes Lamers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-26T14:49:48.693Z
Answers.Text: Can you share the javascript part where the FileID hidden input is appended to the form?
Answers.UserDisplayName: Johannes Lamers
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-26T14:54:21.990Z
Answers.Text: Just edited the answer to include that JavaScript part
Answers.UserDisplayName: Paul
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-10-15T23:45:39.550Z
Answers.Text: Paul, did this solution also include the ability to add a Title to the image asset upon upload?
Answers.UserDisplayName: Brendan Underwood
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2014-08-26T09:04:38.430Z
Answers.LastActivityDate: 2014-08-26T14:54:01.860Z
Answers.LastEditDate: 2020-06-17T08:56:27.903Z
Answers.UserDisplayName: Paul
Body: <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>
  
Tags: <assets><form><entry>
Title: Does anyone have a working example of frontend form with multiple file upload, drag & drop etc?
ThreadText: # 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](http://buildwithcraft.com/docs/templating/entry-form) 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:
  
  ```
  <form action="" method="POST" enctype="multipart/form-data">
      <input type="hidden" name="action" value="entries/saveEntry" />
      <input type="hidden" name="sectionId" value="2" />
      <input type="hidden" name="enabled" value="1" />
  
      <input type="file" name="assets-upload" multiple />
  
      <input type="submit" value="Make it work!" />
  </form>
  
  ```
  
  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:
  
  ```
  <input type="hidden" name="fields[photos][]" value="yourFileId" />
  
  ```
  
  **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('<input type="hidden" name="fields[photos][]" value="' + fileId + '" />');
      }
  },
  ...
  
  ```
  
  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**: username_4, when do you get the 500, and don't you get an error message? Can I see it somewhere?  
  > **username_0**: username_4, 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**: username_0, did this solution also include the ability to add a Title to the image asset upon upload?  
  > **username_2**: Hi username_0. 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**: username_2, 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.
  
  
  ---
  
  