Generating a File and Uploading it via an HTML Form in Javascript

Question

A client requires that the (client-side only) web app which I am developing uploads a JSON file generated by the app. I have no access to the code of the server-side script which handles the saving of the file to the correct directory. I only have access to the following HTML form which posts to the server-side script:

<form enctype="multipart/form-data" acceptcharset="UTF-8" method="post" style="clear:left" action="/ajax/FileUploader.html?idToUse=attachment-1438128389605&amp;decompress=false&amp;outputLocation=%2Fusr%2Flocal%2Ftomcat%2Fwebapps%2FROOT%2Fimages%2F">
  <input size="50" type="file" name="attachment-1438128389605">
  <div style="padding-top:5px">
    <div style="display:none; margin-left:60px; margin-top:10px; float:left" class="file-type-not-permitted">This file type is not permitted </div>
    <input type="submit" name="upload" value="Upload" class="ui-widget ui-state-default ui-corner-all ui-button-disabled ui-state-disabled input-type-submit-small" role="button" aria-disabled="true" disabled="">
  </div>
</form>

My client-side app already has access to the server and this particular HTML form via HTTP authentication.

Is it possible to generate the JSON file and attach it as file to the form? The requirement is that this is all done through client-side JavaScript.

If it's client side only, it cannot 'generate a file'. Do you have to send a file to the server, or can you send a JSON object (not a file)? — azium
– azium, Commented Jul 30, 2015 at 0:13
This is a rather strange scenario. For science though, the only thing I can suggest is to create a very simple server side service that accepts json data, creates a file and sends it back to you, or rather, sends it to the endpoint on your behalf — azium
– azium, Commented Jul 30, 2015 at 0:21
Well you can't make files on the client alone so your task is impossible. What i'm suggesting is to write your own server side service, which you should be able to do without touching the one you can't touch. — azium
– azium, Commented Jul 30, 2015 at 0:28

Chris Alley · Accepted Answer · 2015-08-04 23:26:51Z

I solved the problem by using the FormData interface for XMLHttpRequest. Here is my solution:

// Set the folder path where the file will be uploaded:
var encodedFolderPath = 
  encodeURIComponent('/usr/local/tomcat/webapps/ROOT/images/');

// Set the file name of the file to be uploaded:
var encodedFileName = encodeURIComponent('my_file' + '.json');

// Set the file input name to a unique value (required by the server):
var attachment = "attachment-" + (new Date()).getTime(); 

// Construct the form data:
var formData = new FormData();

// Construct a JavaScript file-like object
var content = "{ json content here }";
var blob = new Blob([content], { type: "application/octet-stream"});
formData.append(attachment, blob, encodedFileName);

// Set the upload URL:
var uploadURL = "";
uploadURL = '/ajax/FileUploader.html?idToUse=' + attachment + 
  '&decompress=false&outputLocation=' +
  encodedFolderPath + '&fileName=' + encodedFileName;

// Send the request:
var request = new XMLHttpRequest();
request.open("POST", uploadURL);
request.send(formData);

Collectives™ on Stack Overflow

Generating a File and Uploading it via an HTML Form in Javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related