# Struggling to Upload Multiples Files in Knack? Not anymore! (Object - based)

**URL:** <https://forums.knack.com/t/struggling-to-upload-multiples-files-in-knack-not-anymore-object-based/8413>\
**Category:** Show & Tell\
**Created:** [June 17, 2020, 9:52pm UTC](https://forums.knack.com/t/struggling-to-upload-multiples-files-in-knack-not-anymore-object-based/8413 "2020-06-17T21:52:44Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Soluntech](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/soluntech/32/780_2.png) [@Soluntech](https://forums.knack.com/u/Soluntech)\
**Post date:** [June 17, 2020, 9:52pm UTC](https://forums.knack.com/t/struggling-to-upload-multiples-files-in-knack-not-anymore-object-based/8413/1 "2020-06-17T21:52:44Z")

</div>

Hello Folks!

Imagine that you are working on an application for a traveling agency that needs to have several files attached to a single reservation. In this case it can be for one traveler or several ones which will lead to upload information into the database such as travel insurance, passport Id, driver's license, flight and hotel Information among others.&nbsp;

Since it is important to save time and accomplish tasks in a timely manner, we want to share with you this guide on how you can upload multiple files at once and be more efficient in the work you do.

Just follow these simple steps:

**1. Create new Object in Builder with at least one field of type File**

 ![RNW1IuKG5GSEsu5IN9rTgA](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/f/fe47e03e7d6c22c62eb9539562eb4bb4f945697e.png)

&nbsp;

**2. Create a new page with the options selected below**

 ![Mx4PshGpTmgTXzM19eHyoA](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/0/0ba497753e4e7b16f3cd58a0913f600fa1120210.png)

&nbsp;

**3. Insert the following code in the API & Code section of the APP (Javascript Tab):**

var ASYNC\_URL =

&nbsp;&nbsp;'[https://cdnjs.cloudflare.com/ajax/libs/async/1.5.0/async.min.js](https://cdnjs.cloudflare.com/ajax/libs/async/1.5.0/async.min.js)';

// Replace your Knack APP info

var headers = {

&nbsp;&nbsp;'X-Knack-Application-ID': **'XXXXXXXXXXX'** ,

&nbsp;&nbsp;'X-Knack-REST-API-Key': **'YYYYYYYYYYYYYYYY'**

};

var uploadFile = function (type, filename, blob, success, error) {

&nbsp;&nbsp;//[https://api.knackhq.com/v1/applications/app\_id/assets/file/upload](https://api.knackhq.com/v1/applications/app_id/assets/file/upload)

&nbsp;&nbsp;success = success || function () {};

&nbsp;&nbsp;error = error || function () {};

&nbsp;&nbsp;type = type || 'image';

&nbsp;&nbsp;// Required

&nbsp;&nbsp;var fd = new FormData();

&nbsp;&nbsp;// Add files

&nbsp;&nbsp;if (filename) {

&nbsp;&nbsp;&nbsp;&nbsp;fd.append('files', blob, filename);

&nbsp;&nbsp;} else {

&nbsp;&nbsp;&nbsp;&nbsp;fd.append('files', blob);

&nbsp;&nbsp;}

&nbsp;&nbsp;// Return a promise

&nbsp;&nbsp;return $.ajax({

&nbsp;&nbsp;&nbsp;&nbsp;type: 'POST',

&nbsp;&nbsp;&nbsp;&nbsp;url:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Knack.api\_url +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'/v1/applications/' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;headers['X-Knack-Application-ID'] +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'/assets/' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'/upload',

&nbsp;&nbsp;&nbsp;&nbsp;headers,

&nbsp;&nbsp;&nbsp;&nbsp;data: fd,

&nbsp;&nbsp;&nbsp;&nbsp;processData: false,

&nbsp;&nbsp;&nbsp;&nbsp;contentType: false,

&nbsp;&nbsp;&nbsp;&nbsp;success,

&nbsp;&nbsp;&nbsp;&nbsp;error

&nbsp;&nbsp;});

};

var createRecord = function (fileId) {

&nbsp;&nbsp;return $.ajax({

&nbsp;&nbsp;&nbsp;&nbsp;// Replace object id

&nbsp;&nbsp;&nbsp;&nbsp;url: Knack.api\_url + '/v1/objects/ **object\_XX** /records',

&nbsp;&nbsp;&nbsp;&nbsp;type: 'POST',

&nbsp;&nbsp;&nbsp;&nbsp;headers,

&nbsp;&nbsp;&nbsp;&nbsp;data: {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; **field\_XXX** : fileId &nbsp; &nbsp; // Replace file field\_id

&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;});

};

var dataURItoBlob = function (dataURI) {

&nbsp;&nbsp;var byteString;

&nbsp;&nbsp;if (dataURI.split(',')[0].indexOf('base64') \>= 0) {

&nbsp;&nbsp;&nbsp;&nbsp;byteString = atob(dataURI.split(',')[1]);

&nbsp;&nbsp;} else {

&nbsp;&nbsp;&nbsp;&nbsp;byteString = unescape(dataURI.split(',')[1]);

&nbsp;&nbsp;}

&nbsp;&nbsp;// separate out the mime component

&nbsp;&nbsp;var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

&nbsp;&nbsp;// write the bytes of the string to a typed array

&nbsp;&nbsp;var ia = new Uint8Array(byteString.length);

&nbsp;&nbsp;for (var i = 0; i \< byteString.length; i++) {

&nbsp;&nbsp;&nbsp;&nbsp;ia[i] = byteString.charCodeAt(i);

&nbsp;&nbsp;}

&nbsp;&nbsp;return new Blob([ia], { type: mimeString });

};

// Replace your scene id

$(document).on('knack-page-render. **scene\_XXX'** , function (e, view) {

&nbsp;&nbsp;var viewForm = **'view\_XXX'** ;&nbsp; // Replace your form view id

&nbsp;&nbsp;// Replace file field\_id

&nbsp;&nbsp;$(

&nbsp;&nbsp;&nbsp;&nbsp;'\<div class="kn-input kn-input-file"\>' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'\<label for=" **field\_XXX**" class="knack-input-label"\>\<span class="kn-input-label"\>Files to upload\</span\>\</label\>' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'\<input type="file" id="fileselect" name="fileselect[]" multiple="multiple" /\>' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'\<div id="filedrag"\>or drop files here\</div\>' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'\<div id="messages"\>\</div\>' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'\</div\>'

&nbsp;&nbsp;).insertAfter('#' + viewForm + ' .kn-form-group-1');

&nbsp;&nbsp;var $submitInput = $('#' + viewForm + ' .kn-submit button[type=submit]');

&nbsp;&nbsp;// Prevent submit action

&nbsp;&nbsp;$submitInput.hide();

&nbsp;&nbsp;LazyLoad.js([ASYNC\_URL], function () {

&nbsp;&nbsp;&nbsp;&nbsp;if (window.File && window.FileList && window.FileReader) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;initialize();

&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;function $id(id) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return document.getElementById(id);

&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;function output(msg) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var m = $id('messages');

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m.innerHTML = msg + m.innerHTML;

&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;function initialize() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.files = [];

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var fileselect = $id('fileselect');

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var filedrag = $id('filedrag');

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// file select

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileselect.addEventListener('change', FileSelectHandler, false);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// file drop

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filedrag.addEventListener('dragover', FileDragHover, false);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filedrag.addEventListener('dragleave', FileDragHover, false);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filedrag.addEventListener('drop', FileSelectHandler, false);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;filedrag.style.display = 'block';

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// handle submit action

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$submitInput.on('click', function (event) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;event.preventDefault();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (!files.length) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('Error, they have not been selected files');

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Knack.showSpinner();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;async.each(

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;files,

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function (file, next) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var fileReader = new FileReader();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileReader.onloadend = function (e) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var blob = dataURItoBlob(fileReader.result);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uploadFile('file', file.name, blob, function (record) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;createRecord(record.id)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.done(function () {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;next();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.fail(next);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;};

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fileReader.readAsDataURL(file);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;},

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function (err) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if (err) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('Internal error, please consult with your administrator.');

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;alert('All files were created successfully');

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// This reloads the page (it is optional)

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;location.reload();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function FileDragHover(e) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.stopPropagation();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.target.className = e.type == 'dragover' ? 'hover' : '';

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// file selection

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function FileSelectHandler(e) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// cancel event and hover styling

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FileDragHover(e);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// fetch FileList object

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var \_files = e.target.files || e.dataTransfer.files;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// process all File objects

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0, f; (f = \_files[i]); i++) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;files.push(f);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showInformation(f, files.length);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handleRemoveFileEvents();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Allow submit

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$submitInput.show();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function showInformation(file, index) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;output(

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'\<p\>' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'File information: \<strong\> ' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;file.name +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'\</strong\> type: \<strong\> ' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;file.type +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'\</strong\> size: \<strong\> ' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;file.size +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'\</strong\> bytes' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'&nbsp;&nbsp;&nbsp;' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'\<a href="#" class="removeFile" data-index="' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;index +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'"\>remove\</a\>' +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'\</p\>'

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function refreshInformation() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var m = $id('messages');

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;m.innerHTML = '';

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for (var i = 0, f; (f = files[i]); i++) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;showInformation(f, i + 1);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;handleRemoveFileEvents();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function handleRemoveFileEvents() {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.removeFile').on('click', function (e) {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var $target = $(e.target);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var index = $target.attr('data-index');

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;files.splice(index - 1, 1);

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Clear all

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.removeFile').off();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// Capture again

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;refreshInformation();

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;&nbsp;&nbsp;}

&nbsp;&nbsp;});

});

**4. Insert the following code in the API & Code section of the APP (CSS Tab):**

/\* Replace your form view id \*/

# **view\_XXX** form .kn-form-group-1 {

&nbsp;&nbsp;display: none;

}

#filedrag

{

&nbsp;&nbsp;min-height: 100px;

&nbsp;&nbsp;display: none;

&nbsp;&nbsp;font-weight: bold;

&nbsp;&nbsp;text-align: center;

&nbsp;&nbsp;padding: 1em 0;

&nbsp;&nbsp;margin: 1em 0;

&nbsp;&nbsp;color: #555;

&nbsp;&nbsp;border: 2px dashed #555;

&nbsp;&nbsp;border-radius: 7px;

&nbsp;&nbsp;cursor: default;

&nbsp;&nbsp;height: 50px;

&nbsp;&nbsp;padding-top: 45px;

}

#filedrag.hover

{

&nbsp;&nbsp;color: #f00;

&nbsp;&nbsp;border-color: #f00;

&nbsp;&nbsp;border-style: solid;

&nbsp;&nbsp;box-shadow: inset 0 3px 4px #888;

}

#messages {

&nbsp;&nbsp;margin-top: 15px;

}

#messages p {

&nbsp;&nbsp;margin-bottom: 2px !important;

}

&nbsp;

**5. Implementation demo:**

Enter this site and watch how it works:&nbsp;&nbsp;[https://soluntech.knack.com/test#multifile-upload/](https://soluntech.knack.com/test#multifile-upload/)

 ![bE1EAHuK-fFC7lat0Bbo0w](https://us1.discourse-cdn.com/flex020/uploads/knack/original/2X/5/5cf22996dc2f7228b0b61e2911c518e635d952af.png)

If you found this helpful, please leave us a comment below and share it with your colleagues!&nbsp;

Let's Make IT Happen!

&nbsp;

---

<div class="post-metadata">

**Author:** ![Taylor\_KnackPlugins](https://sea2.discourse-cdn.com/flex020/user_avatar/forums.knack.com/taylor_knackplugins/32/4462_2.png) [@Taylor\_KnackPlugins](https://forums.knack.com/u/Taylor_KnackPlugins)\
**Post date:** [June 28, 2020, 7:15pm UTC](https://forums.knack.com/t/struggling-to-upload-multiples-files-in-knack-not-anymore-object-based/8413/2 "2020-06-28T19:15:34Z")

</div>

Although it may seem intuitive to copy / paste this code into your own application to perform an object based call. Be cautious of exposing your Knack API key in your API & Code section.&nbsp;

_'X-Knack-REST-API-Key':&nbsp; **'YYYYYYYYYYYYYYYY'** _

Doing this exposes the security of your entire database to anyone that has access to your application via the url it's served on.&nbsp;

If your code is only available through the API & Code section, I'd recommend following the [view-based guide that SOLUNTECH has posted.&nbsp;](https://forums.knack.com/hc/en-us/community/posts/360068779732-Struggling-to-Upload-Multiples-Files-in-Knack-Not-anymore-View-based-)

---

<div class="post-metadata">

**Author:** ![JuliaGlowa31189](https://avatars.discourse-cdn.com/v4/letter/j/53a042/32.png) [@JuliaGlowa31189](https://forums.knack.com/u/JuliaGlowa31189)\
**Post date:** [December 13, 2021, 3:00pm UTC](https://forums.knack.com/t/struggling-to-upload-multiples-files-in-knack-not-anymore-object-based/8413/3 "2021-12-13T15:00:15Z")

</div>

Soluntech, could you please update/clarify your post. All of the links are no longer working and I would really like to use this solution. Thanks much