I am currently working on a application with React as frontend and Nodejs as backend.
I am using multer and minIO to store the files.
Currently:
I have a form where the user fills up some data and also has the option to upload files such as PDF/JPEG etc (multiple input fields for file).
I am using forkmik along with material UI for validation and styling.
So when a user fills up the form (data is a json object), if there is any file upload done it does a POST request to "/upload" uploads the file to the storage engine and then returns a path of where the file is stored.
Then I send one more POST request to "/" to save the user info along with the path that it returned earlier onto MongoDB.
I trying to make it as a single post request to "/" but cannot do so, this is what I have tried,
is to send the user info with content-type "multipart/form-data" along with the files, I am only able to get the "req.files" array properly while the "req.body" of the user information is shown as "[Object: null prototype] { 'values.general_information.first_name': 'Amy',
'values.general_information.last_name': 'John' }" and so on.
I am trying to receive it in a proper json format but cannot do so.
Since the data I was receiving was [Object: null prototype], in the body converted to string using JSON.stringify() and on the backend parsed the incoming data using JSON.parse(), without using react FormData and was able to make it into a single POST request using multipart/form-data as I was uploading files as well.
Related
I am using active storage in my Rails application. The frontend is on React. I am uploading an image via react uploader and sending that image to the backend API where I am storing it to S3 bucket using active storage.
This is the API that handles the image:
if image.attached?
opts = ImageUploader.resize_to_fill(blob: image.blob, width: 100)
variation = ActiveStorage::Variation.new(combine_options: opts)
variant = ActiveStorage::Variant.new(image.blob, variation)
return rails_representation_url(variant, only_path: true)
end
This returns the path in the following format:
/rails/active_storage/representations/...../file_name.png
This works all fine when I use this path inside the application, but I want to send this image in email, there the image breaks as the src attribute can not read this path. If I append http://localhost:3000 manually in the email through dev tools, I am able to see the image then.
Weirldy, in the email, I also see the path appended with http by itself like below:
http:/rails/active_storage/representations/...../file_name.png
I did a workaround and gave only_path to false. This way I was able to get back the complete URL but in the email I got duplicate http written somehow.
Desired Result:
Either the email also appends the host_url along the protocol or removes the http also so that I am able to pass the complete valid URL.
If there is a way to alter the api and somehow get the s3 endpoint directly that would really really work but I am not sure how to do so. It would return the url like this: //{bucketName}/uploads/file/id/image.jpeg
Any help please!
I am creating an application in Next.js(Frontend) and Php(Backend: REST API). Now what I want is whenever the user submits the form I want to get the form data from react js and post it to the REST API developed in Php. But I don't want to show the request on the Network tab as the request contains some sensitive data like token's etc. Is there a way that I can achieve this ? I am able to get the initial data using getServerSideProps().
You cannot hide the data in the Network tab. If you are dealing with sensible data you can encrypt the data before it gets send to the server and decrypt the data afterwards in the backend (PHP code).
I had an existing POST API which was used to sent an object to server. Now I want to attach a file to the header of the same file. Is it possible to do such a thing. Can a request have multiple content-type.
I tried using ngFileUpload directive, and provide my object to data field of Upload.upload method. However, by doing this the entire data object seems to go in header and the request fails.
Any suggestions for sending file in headers and JSON in request body of a POST call??
I eventually found out that a HTTP request can have a single Content-type. This is as per the standards. However it is still possible and quite easy to send data along with a file using the FormData Object. The support for FormData though is not across all the versions of various browsers.
I'm looking for implementation for parsing Json object to csv and send it to a custom email address with the csv file as attachment.
Currently I'm using ionic + Mailgun for sending emails without attachments, but Mailgun dosen't support sending files.
many thanks in advance.
There is no real shortcut here. You'll need to iterate over your data set, generate the csv string and then write to file using cordova file plugin. Then you can either prompt the user to send the email by using the plugin cordova-plugin-email-composer to attach the file you've just saved OR find a service that lets you POST a file as part of the request, or write your own backend code to receive POST requests with the file to send the emails.
I have an admin control panel where admin users can set a few options and then click a button to run a report. The report should return a CSV file download prompt to the user.
I am using ui-router and $resource services. The response headers/mime type are set correctly, but the CSV file is returned as text (no file download initiated) by the $resource handler.
I tried creating the download link directly, by forming a querystring from the $scope, but unfortunately my API's authentication scheme uses a custom HTTP header token and it's not possible to send that to the API (which is also on another subdomain) via an anchor tag, such as this one:
Run
Is there a way to initiate a file download prompt using an XHR request (with custom header)?
I'm using a custom header token so downloading the report via a simple link is impossible; the request has to be made via XHR. My two-part solution:
Returned the CSV data from the API directly as text, removing file attachment headers. This is the correct solution, anyway, because it keeps the REST JSON API unconcerned with file downloads, which are a browser concept.
Wrapped the API response data in a Blob, and then used https://github.com/eligrey/FileSaver.js to initiate a file download.
A drawback is this requires IE10+, but that is okay in my case.