I'm using the Multer library to upload an image. So, I use ReactJS to upload the file to the NodeJS server. In the NodeJS server, I received a piece of image information sent from the client as this picture.
In the s3 upload function, I use the buffer value in this picture as a body. I uploaded it to s3 successfully but when I open the image URL, it shows me like this picture.
There's any suggestion or correct way to upload an image to S3.
I would suggest you to use base64 encoding, 7bit enconding won't work for images as you are trying to do.
You can read more about that in this StackOverflow answer: https://stackoverflow.com/a/28531705/6334411
Related
Users on our site can write posts using markdown, and upload an image using an input file. I've already set it up so that any images that get uploaded using the input element are uploaded to an s3 bucket, but how do I add the markdown images as well? Right now I'm sending the data to my nodejs backend from the react frontend using formData(). I've got it to the point where I can send a single image file from either the input option or the markdown, but it won't let me upload any more than this.
Does anyone know how I can send more than one image file to the backend using formData(). Thanks
FileList is not supported in FormData, so you need to append each file.
for(let image of images) {
formData.append("images", image)
}
I'm using express js to serve files to an angular app and I'm deciding between these approaches:
res.status(201).json({ imagepath: '<URL>' });
res.sendFile('<URL>');
I'm thinking that sending the url will force an extra round trip so I should go with the sendFile but I want to doublecheck. Is there anything I'm missing?
The best option would be to store the image file on something like AWS S3 and then send the file URL using your Express application. You would use the aws-sdk package here to save the image to S3 (detailed article here). Then you would send the URL location of that image to your database to be stored.
I use express and multer for upload file(only image);but i want to resize image before or after.I searched a lot of;and i found a lot of documents.for example multer-imager(it wants amazon s3).I only want to uploiad file into my disk.I tried resize image before upload with canvas on clientside;but multer see unmodified image(i use multer limiter( 1mb ) ) and i get error: the file is bigger than 1mb.Because multer see unmodified image.
I had a same issue in my Ionic 3 mobile application. You can use croppr.js to crop the image before send to the server side. check this question
You can use multer-transform package
I'm using sharp to process images on the server side and react dropzone to get the image file. When I post the file to the server from dropzone, I get the blob out of the request.body that looks like:
{ preview: 'blob:http%3A//127.0.0.1%3A3000/1451580a-b24f-478f-a9f7-338c0d790829' }
Optionally, before I send data to the server I can use FileReader (or something else) to do something with the image file instead of turning it into a blob.
Sharp takes:
A Buffer containing JPEG, PNG, WebP, GIF, SVG, TIFF
Raw pixel image data
A String containing the path to an image file, with most major formats supported.
How can I use what I have to provide sharp a supported format?
I recommend trying out a node.js module called Multer to help you access your photo file on your server.
https://github.com/expressjs/multer
First, on the client, you'll want to append your file to a FormData object like this:
// obtain the file from your react dropzone and save it to this file variable
const file = dropzone.file // not sure how you do this with react dropzone
const data = new FormData()
data.append('photo', file)
Then you'll send this FormData object to your server. On the server you'll use Multer on the route you're using for the photo for processing.
Make sure you npm install multer, and require it on your server or routes file. If you're sending a single file you'll use the multer 'single' method. If you want to do anything different check out the API documentation.
app.post('/photos', multer().single('photo'), controller.processPhoto);
In this example route, you're sending a POST request to /photos, multer is looking for a file with a FormData key of 'photo' and appending that to the request object.
Then in this made up 'controller.processPhoto' method you'll have access to the image as a property of the request object, on req.file. With this you can easily access a lot of good information including the image buffer req.file.buffer which it sounds like you need. (also mimetype, original name etc.)
This should be enough to get you started.
I'm trying to recompress a PNG after upload and crop using tinyPNG API https://tinypng.com/developers/reference
My HTTP request in the server method looks like :
var tinyResponse = HTTP.post('https://api.tinypng.com/shrink', {auth: 'api:<myAPIkey>', data: image});
Where image is the base64 data like : data:image/png;base64,iVBORw0KG...
The api then tels me : "Does not appear to be a PNG file"
So I guess the TinyPNG API doesn't like the base64 format. What I should do is store the base64 into a temp file, use the API to compress, get the file back and re-encode it in base64. Yes what I want is to store the image file in the mongodb directly.
But my knowledge of node.js and Meteor is not suffisant for the moment.
Can someone throw me a bone here ? Thx
(Maybe I'm totally wrong and should use GM and cfs packages)
It would be nice if you provided more code or even your github repo but check the documentation for node: https://tinypng.com/developers/reference#node-js
You can use NPM packages with Meteor: http://docs.meteor.com/#/full/Npm-depends