We Keep Coding

Saving user uploaded image to folder and/or server

I have an app, that allows users to upload an image, crop it and with other data save it all as html file to be used as a footer for emails. The image is given to them as base64.
Howver turns out this is not supported by Outlook, since it doesnt accept b64 data as img source.
So my idea was to save the cropped image to a file, let's say /public/avatars/avatar.png and link it's directory as a source. However I'm having trouble finding a way how to save images to to a file using JS. My allowed stack is JS and React, no node.js.
How would I do that? I can have the file as either b64 ot canvas element, so i'm flexible here, as long as it's saved to file.
I'm open to other solutions too.

You can't save a file with client language only. You have to save it to a server, own server or external server or a service like AWS.
The best solution without server-side (strangly) is to use a API for save image and get link from this API. Then you can use this link to Outlook.
You can use https://aws.amazon.com/fr/cloudfront/ free for one year with 50Go and 2 millon request monthly.
If you do not exceed 300,000 images per year you can use this service : https://cloudinary.com/pricing
You can also use https://www.deviantart.com/developers/ but that's not really the point of service.
Weird solution :
Be careful, the login and password of your FTP user will be available in the source of your code. Minimum rights must be administered.
You can use this script for talk to FTP server from JS (not tested but seems worked) : http://www.petertorpey.com/files/ae/scripts/FTPConnection.jsx
You can try something like that :
var ftp = new FtpConnection("ftp://URL") ;
ftp.login("username", "password");
ftp.cd("FOLDER") // For move to folder
ftp.put(file,"FILE.PNG") ; // File must be a File JS Object
ftp.close() ;

image not found / can't get /uploads/image nodejs REST API

I am trying to send an image to client in nodejs/expressjs REST API. What I am trying to do is saving that image url in mongo db database. When user make a get request, I send all the necessary data alongside the image which is basically avatar. Now on the client side I am not able to receive that image. I am keep getting below responses.
in console tab of chrome dev tools I am getting below.
When I see in the network tab I get below response which also has the link to avatar. Everything is perfect here.
Now when I check my uploads folder I do have the image. Check below:
After all this I am still getting these errors and still not sure where exactly am I making mistake. One thing is that maybe the client is trying to make a request to /uploads/image end point which I do not want. I simply want that image to be displayed using the url I am getting on response.

As we do not see the configuration of static files in express, this might be the problem.
To serve static files in your /uploads folder you need to add this line
app.use('/uploads', express.static('uploads'));

The 'uploads' directory will not be accessible from the frontend.
In node, move the uploaded file in to a subdirectory of the public directory of the node app, and set a relative path from there ans the image path.

How to load image from Mongo with the help of image path (with Angular)

I need to show image from db. I stored the image path into db. My db is MongoDB, but I am not able to show the image in frontend, I get this error in console:
Not allowed to load local resource:file path
How to solve this problem?

Js - Cache file, open it, detect changes and upload

I have a file structure on a web page, and look for a solution for the following scenario:
The chosen file should be downloaded in browser cache and opened (if it's an excel document, open with excel, etc.).
Now when the user changes the file, it should be detected and the file should be uploaded again.
Is this even possible with JavaScript?
If yes, where do I store the file (temporary internet folder?) and how do I detect the changes?

The only way for this to work you would need to have the user select the downloaded file, and then check for modification.
HTML
<label for="excelFile">Select the excel file: </label><input type="file" id="excelFile" />
JS
//Change event to detect when the user has selected a file
document.querySelector("#excelFile").addEventListener("change",function(e){
//get the selected file
var file = this.files[0];
//get the last modified date
var lastModified = file.lastModified;
//check lastModified against stored lastModified
//this assumes you store the last mod in localStorage
if(localStorage['excelLastMod'] < lastModified){
//It has modified update last mod
localStorage['excelLastMod'] = lastModified;
//do upload
}
});
If you know your user is using Chrome you can use Chrome's FileSystem api

The way you describe it: No, that is not possible in JavaScript.
It sounds like you want an FTP client.
When the user changes the file, it should be detected and the file should be uploaded again.
That is not possible due to JS having almost no access to the file system.
The only way you can access a file at all is by requesting the user to select one, see:
How to open a local disk file with Javascript?
So the most you could do would be:
File is downloaded.
Based on browser & settings, file may be opened automatically, or not.
User is presented with a file selection dialog that they can use when they are done editing.
Compare selected file to file on server and upload if changed.
After downloading a file, you have no control over it.
For applications that have a protocol registered (such a steam://, for example), you might be able to request the URL being opened in a program, but that would require an if per file type/program.
Detecting file changes is not at all possible (because you have no access to the file), and uploading again requires the user to select the file manually, using a file dialog.

Thanks for your help and ideas. I saw a software (https://www.group-office.com/) which includes this function so there has to be way to do it.
New Idea, using chrome filesystem api (#Siguza already said it):
Create file from servers database on users local filesystem with filesystem api
open file locally (should work with filesystem:http://www.example.com/persistent/info.txt, or?)
poll last changes of file every x seconds
if change detected, upload file back to servers database
I saw some problems with excel locking the files Check if file has changed using HTML5 File API
but except of that this should work, shouldn't it?

Upload and Retrieve Image in Node.js?

I'm new to nodejs. I'm trying to upload an image to the server and store that image path in the localhost's PostgresSQL database as like this (myipaddress:3000/uploads/images/12345.png).
I Learned to upload an image to the server as specified in this link
But I would like to load that image url separately in mobile device or in image tag as follows <img src="myipaddress:3000/uploads/images/12345.png">
Thanks in advance and Can any one please provide suggestions to access an uploaded image with its url in my express application

Follow this (http://www.hacksparrow.com/handle-file-uploads-in-express-node-js.html) to upload an image to server in nodejs.
Once you followed. It will return response like this
File uploaded to: ./public/images/85d15c2f7e812a03faa44bdef0ce41f5.png - 278070 bytes
The response shows that your image is stored in the public/images directory
Image Name : 85d15c2f7e812a03faa44bdef0ce41f5.png
Image Path : ./public/images/85d15c2f7e812a03faa44bdef0ce41f5.png
You can load the image with the server ip by removing the public from the URL. Because we can directly access the content from the public directory without specifying public.
So the following link is enough to load the image from the URL.
your-local-ip:port/images/85d15c2f7e812a03faa44bdef0ce41f5.png
eg:
http://localhost:3000/images/85d15c2f7e812a03faa44bdef0ce41f5.png