View on GitHub

File Uploads

Remake can trigger a file upload using a single line of HTML.

<input data-i type="file">

To display the file after it's uploaded, you just need to add a couple more lines:

<div data-o-type="object" data-l-key-uploaded-image>
  <input data-i type="file" name="uploadedImage">
  <img data-l-target-uploaded-image src="">
</div>

Remake takes care of:

  1. Uploading the file to a user directory
  2. Showing the file's upload progress
  3. Sending the file's final path back to you

You just have to do two steps:

  1. Create the file <input> element
  2. Tell Remake where to insert the file after it's done uploading

That's it! 🎉

How file uploading works

With a minimal amount of code, you get:

  1. File uploading
  2. A progress bar notification
  3. The file is inserted into the page
  4. All your data is saved
<div data-o-type="object" data-l-key-uploaded-image>
  <input data-i type="file" name="uploadedImage">
  <img data-l-target-uploaded-image src="">
</div>

How this code works

  1. A user clicks on the file <input> element
  2. They choose a file to upload
  3. Remake automatically shows the progress of the file upload
  4. Remake returns the path of the uploaded file back to your front-end
  5. Remake will insert the path of the uploaded file into the closest data-o-key-* or data-l-key-* attribute, as long as it matches the name attribute that's on the <input> element
  6. If the file can be displayed on the page, for example as an image or video, then it'll be displayed immediately

That's all there is to file uploads in Remake! 🌈

View on GitHub
☰ Menu