Comments (9)
@dziraf can you please look int this?
from adminjs.
Check req.fields
from adminjs.
@dziraf thanks, but I am unable to make use of the file I sent to the endpoint. I even used multer to handle it but to no avail.
Please see my codes below. This is how I have always sent files to my nodejs backend.
//Frontend
const formData = new FormData()
formData.append("file", file)
formData.append("key", `sparePartRequests/${sparePartRequest._id}/${uniqueId}-${file.originalname}`)
const response = await api.client.request({
baseURL: api.baseURL,
url: '/custom-admin/upload-fie-to-s3',
method: 'POST',
data: formData,
})
//admin router
const upload = multer({
limits: {
fileSize: 1000000
},
fileFilter(req, file, cb) {
if (!file.originalname.match(/\.(jpg|jpeg|png)$/)) {
return cb(new Error("Please upload an image"))
}
cb(undefined, true)
}
})
adminRouter.post('/custom-admin/upload-fie-to-s3', upload.single("file"), async (req, res) => {
try {
const file = req.files.file
const { key } = req.fields
const params = {
Bucket: process.env.DO_SPACES_STORAGE_BUCKET_NAME,
Key: key,
Body: file.buffer,
ContentType: file.type
}
await s3.upload(params).promise()
return successResponse(200, "File successfully uploaded to S3", res, params)
return
} catch (error) {
return errorResponse(500, error.message, res);
}
})
Please how is it supposed to work?
from adminjs.
AdminJS uses old formidable middleware for forms, you shouldn't use multer. If you create an AdminJS action instead of an endpoint, the file will be available in request.payload without any extra backend code
from adminjs.
@dziraf please how can I use the "old formidable middleware" to send the file to the endpoint? Creating an action is not an option, because nowhere in your documentation is it explained how you can call an action when a custom button inside a frontend code is clicked. Or you have an example?
from adminjs.
@dziraf in my original setup above, I could read the file as shown below, but the problem is that I am unable to make use of it and send to s3. Please how am I supposed to upload it to s3?
File {
_events: [Object: null prototype] {},
_eventsCount: 0,
_maxListeners: undefined,
size: 452241,
path: 'C:\\Users\\efosa\\AppData\\Local\\Temp\\upload_fe34050a693df24591d8d910e1791047',
name: 'a-black-person-doing-a-home-inspection-617185028.png',
type: 'image/png',
hash: null,
lastModifiedDate: 2024-04-23T13:05:00.900Z,
_writeStream: WriteStream {
fd: 4,
path: 'C:\\Users\\efosa\\AppData\\Local\\Temp\\upload_fe34050a693df24591d8d910e1791047',
flags: 'w',
mode: 438,
start: undefined,
pos: undefined,
bytesWritten: 452241,
_writableState: WritableState {
objectMode: false,
highWaterMark: 16384,
finalCalled: false,
needDrain: true,
ending: true,
ended: true,
finished: true,
destroyed: false,
decodeStrings: true,
defaultEncoding: 'utf8',
length: 0,
writing: false,
corked: 0,
sync: false,
bufferProcessing: false,
onwrite: [Function: bound onwrite],
writecb: null,
writelen: 0,
afterWriteTickInfo: null,
buffered: [],
bufferedIndex: 0,
allBuffers: true,
allNoop: true,
pendingcb: 0,
constructed: true,
prefinished: true,
errorEmitted: false,
emitClose: true,
autoDestroy: true,
errored: null,
closed: false,
closeEmitted: false,
[Symbol(kOnFinished)]: []
},
_events: [Object: null prototype] {},
_eventsCount: 0,
_maxListeners: undefined,
[Symbol(kFs)]: {
appendFile: [Function: appendFile],
appendFileSync: [Function: appendFileSync],
access: [Function: access],
accessSync: [Function: accessSync],
chown: [Function: chown],
chownSync: [Function: chownSync],
chmod: [Function: chmod],
chmodSync: [Function: chmodSync],
close: [Function: close],
closeSync: [Function: closeSync],
copyFile: [Function: copyFile],
copyFileSync: [Function: copyFileSync],
cp: [Function: cp],
cpSync: [Function: cpSync],
createReadStream: [Function: createReadStream],
createWriteStream: [Function: createWriteStream],
exists: [Function: exists],
existsSync: [Function: existsSync],
fchown: [Function: fchown],
fchownSync: [Function: fchownSync],
fchmod: [Function: fchmod],
fchmodSync: [Function: fchmodSync],
fdatasync: [Function: fdatasync],
fdatasyncSync: [Function: fdatasyncSync],
fstat: [Function: fstat],
fstatSync: [Function: fstatSync],
fsync: [Function: fsync],
fsyncSync: [Function: fsyncSync],
ftruncate: [Function: ftruncate],
ftruncateSync: [Function: ftruncateSync],
futimes: [Function: futimes],
futimesSync: [Function: futimesSync],
lchown: [Function: lchown],
lchownSync: [Function: lchownSync],
lchmod: undefined,
lchmodSync: undefined,
link: [Function: link],
linkSync: [Function: linkSync],
lstat: [Function: lstat],
lstatSync: [Function: lstatSync],
lutimes: [Function: lutimes],
lutimesSync: [Function: lutimesSync],
mkdir: [Function: mkdir],
mkdirSync: [Function: mkdirSync],
mkdtemp: [Function: mkdtemp],
mkdtempSync: [Function: mkdtempSync],
open: [Function: open],
openSync: [Function: openSync],
opendir: [Function: opendir],
opendirSync: [Function: opendirSync],
readdir: [Function: readdir],
readdirSync: [Function: readdirSync],
read: [Function: read],
readSync: [Function: readSync],
readv: [Function: readv],
readvSync: [Function: readvSync],
readFile: [Function: readFile],
readFileSync: [Function: readFileSync],
readlink: [Function: readlink],
readlinkSync: [Function: readlinkSync],
realpath: [Function],
realpathSync: [Function],
rename: [Function: rename],
renameSync: [Function: renameSync],
rm: [Function: rm],
rmSync: [Function: rmSync],
rmdir: [Function: rmdir],
rmdirSync: [Function: rmdirSync],
stat: [Function: stat],
statfs: [Function: statfs],
statSync: [Function: statSync],
statfsSync: [Function: statfsSync],
symlink: [Function: symlink],
symlinkSync: [Function: symlinkSync],
truncate: [Function: truncate],
truncateSync: [Function: truncateSync],
unwatchFile: [Function: unwatchFile],
unlink: [Function: unlink],
unlinkSync: [Function: unlinkSync],
utimes: [Function: utimes],
utimesSync: [Function: utimesSync],
watch: [Function: watch],
watchFile: [Function: watchFile],
writeFile: [Function: writeFile],
writeFileSync: [Function: writeFileSync],
write: [Function: write],
writeSync: [Function: writeSync],
writev: [Function: writev],
writevSync: [Function: writevSync],
Dir: [class Dir],
Dirent: [class Dirent],
Stats: [Function: Stats],
ReadStream: [Getter/Setter],
WriteStream: [Getter/Setter],
FileReadStream: [Getter/Setter],
FileWriteStream: [Getter/Setter],
_toUnixTimestamp: [Function: toUnixTimestamp],
F_OK: 0,
R_OK: 4,
W_OK: 2,
X_OK: 1,
constants: [Object: null prototype],
promises: [Getter]
},
[Symbol(kIsPerformingIO)]: false,
[Symbol(kCapture)]: false
},
[Symbol(kCapture)]: false
}
from adminjs.
I'm having the same problem right now, I read the file and send it to the client side, but I guess it doesn't return multiparta because the content-type is application/json, I couldn't find how to change it on the form, and since I'm new to admin.js, I looked at the documentation, but local upload seemed very complicated, now I will try sending it with base64.
from adminjs.
base64 image is working if you want ı can share my code @eakenbor
from adminjs.
Thanks @cetinirfan. This is what I did eventually:
import fs from "fs"
const file = req.files.file
const { key } = req.fields
const fileStream = fs.createReadStream(req.files.file.path)
const params = {
Bucket: process.env.DO_SPACES_STORAGE_BUCKET_NAME,
Key: key,
Body: fileStream,
ContentType: file.type
}
await s3.upload(params).promise()
I hope @dziraf and his team will do justice to their documentation because using this adminjs should not be this painful.
from adminjs.
Related Issues (20)
- @adminjs/relations rendering error: Error: Component "RelationsShowPropertyComponent" has not been bundled HOT 1
- [Bug]: Admim js Dashboard takes very long time to load the page. HOT 1
- [Feature]: Overriding the create new resource actions button HOT 1
- [Feature]: [@adminjs/relations] Add custom properties/columns.
- [Feature]: function for guard instead of only string
- How can I query a record or a list of records with exact matching property values?
- [Bug]: Custom Component is taking too long to load and resulting in heap memory out of usage. HOT 2
- [Bug]: [@admins/relations] custom action icon not shown
- [Bug]: Nav bar logo does not change in dark theme.
- How do I call aws-sdk from client? HOT 1
- [Bug]: Relations: Bugs in deleting many-to-many item HOT 8
- [Bug]: Use import specifier 'with' instead of 'assert'
- [Bug]: @adminjs/relations default sorting not working in oneToManyHandler
- [Bug]: Leaflet Maps not rendering properly in production
- [Bug]: recharts module not found HOT 2
- [Feature]: Guard is not supported for basic types
- [Bug]: href with search filter on resource removes sidebar navigation active state for the page using it
- [Bug]: Not able to replace Dashboard with TSX component
- [Bug]: Not working with NX
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from adminjs.