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.

Anthony McGrath · Accepted Answer · 2020-02-11 21:54:07Z

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, 2020 at 21:54

Anthony McGrath

8026 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Curious101 Over a year ago

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 Over a year ago

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.

Anthony McGrath Over a year ago

Glad to have helped and that you found a solution by tweaking this. Thanks for the tip.

Collectives™ on Stack Overflow

AJAX upload dynamically created HTML file

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related