feat: Multipart Form Data file uploads

[maxdestors]

This PR attempts to implement Multipart Form Data file uploads, as discussed in #195.

I am new to this framework and have referred to the work done in #258 and #558 for guidance.

In the .bru file, I used a | to separate different files, considering that it is a forbidden character on both Windows and Linux.

Contribution Checklist:

• The pull request only addresses one issue or adds one feature.
• The pull request does not introduce any breaking changes
• I have read the contribution guidelines.
• I have added screenshots or gifs to help explain the change if applicable.
• Create an issue and link to the pull request.

[Nahuel92]

@helloanoop Hi (and thanks for this fantastic software :)).
Is there any chance for this to be merged and released any time soon? It would be awesome to have this feature available on Bruno.

[mateo-gallardo]

@maxdestors I made a PR to use relative paths for files that are inside the collection's folder. Since when we share/push the collection to a repository we would upload those test files, and anybody that pulls the collection doesn't have to re-select the files to send the request (and if they save after re-selecting then they would have unnecessary changes in git).

For any files outside the collection's folder I kept the absolute paths. I think that makes the most sense.

[mateo-gallardo]

One more thing, this won't work in the CLI runner as is, since it has another prepare-request script.

@helloanoop do you recommend just copy-pasting for now? Are there plans to share the prepare request code between the CLI runner and the app in the future?

[mateo-gallardo]

Here's a NodeJS server for anyone that wants to try the feature.

server.js

const express = require('express');
const multer = require('multer');
const app = express();

// Configure multer for file uploads
const upload = multer({ dest: 'uploads/' }); // Files will be saved in 'uploads' directory

// Endpoint for multiple files
app.post('/multiple-files', upload.array('files'), (req, res) => {
  console.log(req.files);
  res.send('Multiple files uploaded successfully.');
});

// Endpoint for a single file
app.post('/single-file', upload.single('file'), (req, res) => {
  // req.file contains information about the uploaded file
  console.log(req.file);
  res.send('Single file uploaded successfully.');
});

// Start the server
const PORT = 8000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

Just npm install express multer and node server.js

[binaryfire]

We didn't realise UI file uploads weren't possible with Bruno when we switched from Postman. Just discovered this limitation today while transferring a collection. Would also love to have this merged soon.

[ash-eng-spin]

Would also like this feature implemented and have the ability for user to edit content-type of each part.

[helloanoop]

Thank you @maxdestors for your work on this!
I am reviewing this and changes look good.

I will have this merged and shipped in 2 days.

[helloanoop]

Would also like this feature implemented and have the ability for user to edit content-type of each part.

@ash-eng-spin Are you talking about having an option to select the content type as text/file ?

[ash-eng-spin]

Would also like this feature implemented and have the ability for user to edit content-type of each part.

@ash-eng-spin Are you talking about having an option to select the content type as text/file ?

Not quite. In a multi-part request, there is a content type for each part. The user should be able to set the content type themselves so they can ensure it matches the API specification. The content-type can be different for each part and is often required to be sent over in the multi-part request, I've used software before that auto-generates the content-type and that auto-generation isn't always what the API specification wants.

Typically, the Text/File designation in a UI is just to enable the file selection/explorer.

Thank you for your hard work and engaging this topic! I was shocked how seamless migration was over to this product, but multi-part functionality is a show stopper for us.

[binaryfire]

@helloanoop Very happy this is being merged, thank you!

+1 for being able to set the content-type for each part as per @ash-eng-spin's comment. Here's how to do it in Postman (in case you want to check that out as a reference): https://www.youtube.com/watch?v=1yqNfqfZPB8

This is essential for endpoints you need to send a file + a JSON payload to.

[maxdestors]

@helloanoop Any idea on how to store the content type in the bru file ?

[ash-eng-spin]

Hello. I've downloaded version 1.9 and do not see the ability to edit the content-type for each part in a multipart request. Am I missing something do we need to open another issue for it?

[mateo-gallardo]

@ash-eng-spin Changing the content-type wasn't added to this PR. I believe the idea is to wait until the new version of the Bru lang is implemented so we can add decorators for extra info about each param. Please read this issue and see if the proposal would satisfy your use case #1502.

Besides that issue of the Bru lang schema, I don't think there's an issue tracking the ability to edit the content-type, so I think you can go ahead and create one to track it.