how to use node multer to upload image in supabase?
const path = `${supabase.storage.url}/storage/v1/object/public/${nameBucket}`
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, path)
},
filename: (req, file, cb) => {
cb(null, `${Date.now()}-${file.originalname}`) //
},
})
i try like that and still error
Related
Hi I'm trying to POST image to Strapi via api/uploads with Axios
With code below I have reponse with code 200, but in Strapi UI get file with no image, but with other parameters.
Something like this
return bot.getFileLink(msg.photo[0].file_id).then((resp) => {
axios.get(resp, { responseType: 'buffer' }) // geting img from telegram link
.then(axres => {
const buffer = Buffer.from(axres.data) // make Buffer obj
const imgdata = new formdata()
imgdata.append('files', buffer, { filename: resp }) // append to FormData object
axios.post(`http://localhost:1337/api/upload`, imgdata, {
headers: { 'Content-Type': 'multipart/form-data' },
})
.then(response => {
console.log(response);
})
.catch(err => {
console.log(err);
})
})
})
In docs provided example with FormData in body option, but in this case I have error "Bad request 400"
await fetch('/api/upload', {
method: 'post',
body: new FormData(e.target)
});
Solved. With "binary" endocding in Buffer it works perfect.
return bot.getFileLink(msg.photo[0].file_id).then((resp) => {
axios.get(resp, { responseType: 'arraybuffer' })
.then(axres => {
const buffer = Buffer.from(axres.data, 'binary')
const imgdata = new formdata()
imgdata.append('files', buffer, { filename: resp })
console.log(buffer)
axios.post(`http://localhost:1337/api/upload`, imgdata, {
headers: { 'Content-Type': 'multipart/form-data' },
})
.then(response => {
console.log('ok');
})
.catch(err => {
console.log(err);
})
})
})
I'm trying to send a file along with other fields on the state in Nextjs using node-fetch.
the goal is not to store the file on the server (even temporarily) but to stream it from the web browser as the user submits the form to the Nodemailer, and then to be emailed from Nodemailer as an attachment along with other information.
client:
const handleFile = (e) => {
let file = e.target.files[0];
let attachment = new FormData();
attachment.append("file", file);
fetch(`route`, {
method: "POST",
headers: {},
body: attachment,
})
.then((response) => {
if (response.ok) console.log("Uploaded");
else console.log("Error");
})
.catch((error) => {
console.log(error);
});
SMTP:
const nodemailer = require("nodemailer");
async function main(subject, html, to, file) {
let transporter = nodemailer.createTransport({
// mail server setup
});
let attachment = [];
if (file) {
attachment = [
{
filename: file.file[0].originalFilename,
path: file.file[0].path,
},
];
}
const mailOptions = {
from: from,
to: to,
subject: subject,
html: html,
attachments: attachment,
};
try {
let info = await transporter.sendMail(mailOptions);
console.log(info);
} catch (error) {
console.error(error, "fail to send email");
}
API :
const express = require("express");
const router = express.Router();
const multiparty = require("multiparty");
const sendEmail = require("../../utilities/SMTP");
router.post("/route", (req, res) => {
var form = new multiparty.Form();
form.parse(req, function (err, fields, files) {
sendEmail(
"Career Attachment",
contactEmail(fields),
"to#mail.com",
files
);
res.send("Your Request Sent Successfully");
});
});
Edit: I'm able to stream the file as an attachment with the above code.
Needs improvements.
you should use formData and append your files to it like in the code below
let file = e.target.files[0];
let formData = new FormData();
formData.append("file", file);
if you want to let it be dynamic and upload multiple files you can write your function like follows
let files = e.target.files;
let formData = new FormData();
for (let i = 0; i < files .length; i++) {
formData.append("file", files [i]);
}
I'm learning how to write code of service worker and stuck with the error "ReferenceError: document is not defined" in my app.js file. I'm using workbox library with InjectManifest mode. I think the problem in the webpack.config.js, because when I delete InjectManifest in webpack.config.js the error disappears.
My webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const {InjectManifest} = require('workbox-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.html$/i,
use: [
{
loader: 'html-loader',
},
],
},
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, 'css-loader',
],
},
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
},
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin(),
],
},
plugins: [
new HtmlWebPackPlugin({
template: './src/index.html',
filename: './index.html',
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css',
}),
new InjectManifest({
swSrc: './src/js/service.worker.js',
swDest: 'service.worker.js',
}),
],
};
My service.worker.js file:
import { precacheAndRoute } from 'workbox-precaching/precacheAndRoute';
import { cinemaNews } from './cinemaNews';
import { url } from './app';
precacheAndRoute(self.__WB_MANIFEST);
const CACHE_NAME = 'v1';
const responseCache = new Response(JSON.stringify(cinemaNews));
self.addEventListener('install', (evt) => {
console.log('install')
evt.waitUntil((async () => {
console.log('install waitUntil')
const cache = await caches.open(CACHE_NAME);
await cache.put(url, responseCache);
await self.skipWaiting();
})());
});
self.addEventListener('activate', (evt) => {
console.log('activate')
evt.waitUntil(self.clients.claim());
});
self.addEventListener('fetch', (evt) => {
console.log('sw fetch')
const requestUrl = new URL(evt.request.url);
if (!requestUrl.pathname.startsWith('/news')) return;
evt.respondWith((async () => {
console.log('respondWith')
const cache = await caches.open(CACHE_NAME);
const cachedResponse = await cache.match(evt.request);
return cachedResponse;
})());
evt.waitUntil((async () => {
console.log('waitUntil');
const response = await fetch(evt.request.url);
const client = await clients.get(evt.clientId);
let json = await response.json();
client.postMessage(json);
})());
});
This statement:
import { url } from './app';
appears to be triggering the issue, as there must be code inside of your app.js that is executed via that import, and which assumes that document will be defined. (It's not defined inside of the ServiceWorkerGlobalScope.)
Based on how you're using the export, I'm assuming that it's just a string constant containing a shared URL that you want to use from both your main web app and your service worker. Assuming that's the case, the easiest thing to do would be to refactor your modules that there's a constants.js (or some similar name) module that only exports your string constants, and doesn't try to run any code that references document. You can then import the constant from either your web app or the service worker without issue.
// constants.js
export const url = '/path/to/url';
// service-worker.js
import {url} from './constants';
// do something with url
// app.js
import {url} from './constants';
// do something with url
I am using react-native-fs to download files from server and save them. Once they are downloaded I am using react-native-file-viewer to open them. This process totally works fine: I am able to download and open it in the viewer, but I am not able to save the file in the File application from the viewer, though I can save in iCloud but not in the iPhone.
The downloaded file is stored in a place like
/var/mobile/Containers/Data/Application/CCF6CD16-A62A-48BB-92F3-3021195CFE0C/Documents/react-native-pdf.pdf
but this is not shown in the File app.
The code I am using to download and view the file is as follows
RNFS.downloadFile({
fromUrl: 'http://www.mywebsite.com/react-native-pdfurl.pdf',
toFile: `${RNFS.DocumentDirectoryPath}/react-native-pdfurl.pdf`,
}).promise.then((r) => {
console.log('yo yo yo ');
this.setState({ isDone: true });
const path = `${RNFS.DocumentDirectoryPath}/react-native-pdfurl.pdf`;
FileViewer.open(path)
.then(() => {
// success
})
.catch(error => {
// error
});
RNFS.readDir(RNFS.DocumentDirectoryPath).then(files => {
console.log(files);
})
.catch(err => {
console.log(err.message, err.code);
});
});
The readDir gets me the name path of the file saved. But this is not reflected in any folder in the File application.
My question is how can I save the file in a way that it shows in the File application.
The below code downloads the file and opens it. In case the file already exists it will directly open it.
downloadOpenClick = async (item) => {
try {
let platformName = 'ios';
if (Platform.OS === 'ios'){
platformName = 'ios';
}else{
platformName = 'android';
}
const selectedFile = item;
var dirType=null;
if(Platform.OS === 'ios'){
dirType = RNFS.DocumentDirectoryPath;
}else{
await this.requestStoragePermission();
dirType = RNFS.ExternalStorageDirectoryPath+'/AppName';
}
RNFS.mkdir(dirType+`/Folder`).then(files => {
RNFS.mkdir(dirType+`/Folder/SubFolder`).then(files => {
//console.log(files);
}).catch(err => {
//console.log(err.message, err.code);
});
}).catch(err => {
//console.log(err.message, err.code);
});
var exists = false;
RNFS.exists(`${dirType}/Folder/SubFolder/${selectedFile}`).then( (output) => {
if (output) {
exists = true;
const path = `${dirType}/Folder/SubFolder/${selectedFile}`;
FileViewer.open(path)
.then(() => {
// success
})
.catch(error => {
// error
console.log('error');
console.log(error);
});
} else {
const selectedFileUrl = selectedFile.replace(/\s/g, '%20');
RNFS.downloadFile({
fromUrl: `https://mywebsite/api/getAttachment?selectedFile=${selectedFileUrl}`,
toFile: `${dirType}/Folder/SubFolder/${selectedFile}`,
background: true,
begin: (res) => {
console.log(res);
this.setState({ contentLength: res.contentLength});
},
progress: (res) => {
this.setState({ showSpinner: true });
var prog = res.bytesWritten/res.contentLength
this.setState({ downloaded : prog});
console.log(this.state.downloaded);
}
}).promise.then((r) => {
//console.log(r);
this.setState({ showSpinner: false });
this.setState({ downloaded : 0});
const path = `${dirType}/${tipoDesc}/${oggetto}/${selectedFile}`;
FileViewer.open(path)
.then(() => {
// success
})
.catch(error => {
// error
console.log('error');
console.log(error);
});
}).catch(error => {
console.log('error');
console.log(error);
});;
}
});
} catch (error) {
console.log('error');
console.log(error);
}
};
using
react-native-file-viewer and react-native-fs
I use multer to do ajax upload in my project, and I use FormData in front-end to do ajax upload.
I am testing in my iPhone 5s
My Problem is when I click my input[type="file"], and I choose take picture, it can be successfully uploaded.
BUT when I choose from my gallery, and select a picture I took before, the upload program crashed
this problem will just cause in iPhone, but not in Android or PC
\routes\index.js:128
filename: req.file.path.replace(/public/, '')
^
TypeError: Cannot read property 'path' of undefined
at E:\GraduationProject\jnstagram\routes\index.js:128:23
at Array.<anonymous> (E:\GraduationProject\jnstagram\node_modules\multer\lib\make-middleware.js:52:37)
at listener (E:\GraduationProject\jnstagram\node_modules\on-finished\index.js:169:15)
at onFinish (E:\GraduationProject\jnstagram\node_modules\on-finished\index.js:100:5)
at callback (E:\GraduationProject\jnstagram\node_modules\ee-first\index.js:55:10)
at IncomingMessage.onevent (E:\GraduationProject\jnstagram\node_modules\ee-first\index.js:93:5)
at emitNone (events.js:80:13)
at IncomingMessage.emit (events.js:179:7)
at endReadableNT (_stream_readable.js:913:12)
at _combinedTickCallback (node.js:383:13)
at process._tickCallback (node.js:407:11)
my server side code:
var express = require('express');
var multer = require('multer');
var router = express.Router();
module.exports = function() {
var storage = multer.diskStorage({
destination: function(req, file, cb) {
cb(null, 'public/uploads');
},
filename: function(req, file, cb) {
var name = file.originalname;
var dot = name.lastIndexOf('.');
cb(null, name.slice(0, dot) + '-' + new Date().getTime() + name.slice(dot));
}
});
var upload = multer({
storage: storage,
fileFilter: function(req, file, cb) {
if (/\.(png|jpg)$/i.test(file.originalname)) {
cb(null, true);
} else {
cb(null, false);
}
}
});
var fileUpload = upload.single('file');
router.post('/ajaxupload', function(req, res) {
fileUpload(req, res, function(err) {
if (err) {
res.json({
success: false,
message: 'upload failed'
});
return;
}
res.json({
success: true,
filename: req.file.path.replace(/public/, '')
});
});
});
return router;
};
my client side upload code:
var fd = new ForData();
fd.append('file', this.refs.myFile.files[0]); // use React refs
request
.post('/ajaxupload')
.send(fd)
.end(function(err, res) {
if (err) {
throw err;
}
// do something
});