AJAX upload dynamically created HTML file

Question

I have a webpage that allows drop down elements to dynamically create HTML. On this page I also have a "create File" button. When I click this button, I want it to make an AJAX POST request and upload this dynamic page I created with drag and drops to be uploaded as a File.

Here is a simple HTML file to visualize how the file will look like:

<!doctype html>
<html>

<head>
  <title>Test Drag and Drop</title>
</head> 

<body>
     <div class="dynamicPage">

          <div class="subSections">
          </div>

          <div class="subSections">
          </div>

           <!-- more elements and objects in here -->
     </div>

     <div class="stripFromPage">

          <!-- More buttons for drag and drop elements to main page -->
         <button onclick="createFile(this)">Create File</button>
     </div>
</body>

 <script>

   function createFile(elem){

   let url = "action/saveFile";

   var formData = new FormData();

   formData.append('filename', 'test.html');
   formData.append('file', $("html").html());


   $.ajax({
      type: 'POST',
      url: url,
      data: formData,
      contentType: false,
      processData: false,
      success: function (data) {
      alert(data);
      }
   });

  }


 </script>

On the server side I have node.js with a upload method that works for IOS app using the form method, so I know that part is good.

The part I need help with is how to upload DOM object as file and append it to form correctly, specify the name of this file so the backend can save it as that filename.

I prefer javascript over jquery. But I couldn't find any good javascript code for AJAX file upload, so I have jquery here.

score 1 · Accepted Answer · answered Feb 11 '20 at 21:54

1

You could create a Blob object with the HTML string and send it to the server (untested).

var formData = new FormData();
formData.append('filename', 'test.html');
var dynamicPage = $(elem).html(); // the body of the new file...
var fileBlob = new Blob([dynamicPage], { type: "text/html"});
formData.append('file', fileBlob);

Or these two links may help you: Creating Javascript Blob() with data from HTML Element. Then downloading it as a text file

https://javascript.info/blob

answered Feb 11 '20 at 21:54

Anthony McGrath

792
5
7

Thanks @Anthony McGrath. My second thought was to stringify and send it in the form. But your suggestion of creating the blob looks better. I'll give this a shot and revert with an update. – Curious101 Feb 12 '20 at 00:03
This worked. I had to make one minor change. My backend was not picking up the filename that I append in formData earlier, neither was it picking up the filename field from headers. It would save the file as "blob". But changing the formData append to include the filename along with the blob resolved that issue. formData.append('file', fileBlob, "test.html"); I'm accepting this solution. – Curious101 Feb 12 '20 at 00:30
Glad to have helped and that you found a solution by tweaking this. Thanks for the tip. – Anthony McGrath Feb 12 '20 at 18:32

AJAX upload dynamically created HTML file

1 Answers1