storing problem with local upload feature

[everythinginjs]

Hello dear SoftwareBrothers,

I have upgraded my Admin Bro to version 3 and set up file upload feature but when I would like to submit an article with a dropped image I get upload Errors. The same thing goes when I get back to the old version of admin bro and used the one that I wrote through components. I cannot figure out what's exactly going wrong.

this is the error I get when I submit an article with Image.

My Blog js

const AdminBro = require('admin-bro');
const { Blog } = require('../../models/Blog');
const { sort, timestamps } = require('../sort');
const uploadFeature = require('@admin-bro/upload');



/** @type {AdminBro.ResourceOptions} */
const options = {
    sort,
    properties: {
        ...timestamps,
        slug: {
            position: 0,
        },
        description: {
            isVisible: { list: false, edit: true, filter: false, show: true },
            position: 1,
            components: {
                edit: AdminBro.bundle('../components/custom-fonts.edit.tsx')
            }
        },
        tags: {
            isVisible: { list: false, edit: true, filter: true, show: true },
            position: 8
        },
        keywords: {
            isVisible: { list: false, edit: true, filter: true, show: true },
            position: 9,
            type: [String],
        },
        draftMode: {
            isVisible: { list: true, edit: true, filter: true, show: true }
        },
        _id: {
            isVisible: { list: false, edit: false, filter: false, show: false },
        },
    }
};

module.exports = {
    options,
    features: [
        uploadFeature({
            provider: { local: { bucket: 'public/uploads' } },
            properties: {
                key: 'uploadedFile.path',
                bucket: 'uploadedFile.folder',
                mimeType: 'uploadedFile.type',
                size: 'uploadedFile.size',
                filename: 'uploadedFile.filename',
                file: 'uploadFile',
            }
        })
    ],
    resource: Blog,
};

my app.js

app.use('/uploads', express.static('uploads'));

and I also made a directory by the name of upload on the root folder of my app.

so thankful for supporting this amazing admin panel.

[wojtek-krysiak]

you have 500error on the server side. Can you paste a stacktrace from the terminat where you run node app?

[everythinginjs]

I have got nothing in my terminal, the errors are just shown on the console of the browser. I got back to the version that it used to work perfect but I get the same error it's so wierd :|. the rest of the project works great except upload functionality.

[wojtek-krysiak]

dou you have @admin-bro/express in the latest version?

[wojtek-krysiak]

and please click network tab in chrome dev tools. What is the output of new action?

[everythinginjs]

I double check to make sure I have got the latest version of express

"@admin-bro/express": "^3.0.0",
"@admin-bro/mongoose": "^1.0.0",
"@admin-bro/upload": "^1.0.0",
"admin-bro": "^3.2.5",

I took some screen shots from my network tab

pic1

pic2

pic3

pic4

pic5

pic6

pic7

[everythinginjs]

I used to see 2 files in .adminbro cache files but now I only have got just .entry.js I suppose it should have bundle.js as well ? am I right?

[everythinginjs]

I figured out when I click on submit button to store an article with an image. the folder Id is created but it doesn't store an img format in it.

[everythinginjs]

I tried to deploy it on a real server not just local and figured out that this file responds 404

components.bundle.js

I dropped a pic of that here
I deleted .adminbro once but I thought it recreates each time. which I have restarted the server 3 or 4 times but yet no difference

[wojtek-krysiak]

on pic6 - clikc "Response" tab and paste what is there

[everythinginjs]

<title>Error</title>

Internal Server Error

[wojtek-krysiak]

the problem is that it doesn't show you any stacktrace. I think that you have a middleware which simply intercepts all requests and returns 500 without the information: 'what happened' I don't actually remember how to change that in expres but I found something like this: https://stackify.com/node-js-logging/

const app = express()
const winston = require('winston')
const consoleTransport = new winston.transports.Console()
const myWinstonOptions = {
    transports: [consoleTransport]
}
const logger = new winston.createLogger(myWinstonOptions)

function logRequest(req, res, next) {
    logger.info(req.url)
    next()
}
app.use(logRequest)

function logError(err, req, res, next) {
    logger.error(err)
    next()
}
app.use(logError)

this should show you in the node terminal what exactly happened.

Alternatively this also should work temporarily:

function logError(err, req, res, next) {
    console.log('error', err)
    next(err)
}
app.use(logError)

[everythinginjs]

in App.js I wrote something like this instead

if (app.get('env') === 'development') {
	/* Development Error Handler - Prints stack trace */
	app.use(errorHandlers.developmentErrors);
}

app.use(errorHandlers.productionErrors);

and In errorHandlers.js I handle errors

exports.developmentErrors = (err, req, res, next) => {
  err.stack = err.stack || '';
  const errorDetails = {
    message: err.message,
    status: err.status,
    stackHighlighted: err.stack.replace(/[a-z_-\d]+.js:\d+:\d+/gi, '<mark>$&</mark>')
  };
  res.status(err.status || 500);
  res.format({
    // Based on the `Accept` http header
    'text/html': () => {
      res.render('error', errorDetails);
    }, // Form Submit, Reload the page
    'application/json': () => res.json(errorDetails) // Ajax call, send JSON back
  });
};

now in my reponse tab I get this error

message: "EXDEV: cross-device link not permitted, rename '/var/folders/d8/b9tjfmtx3pj5z9gbf9tscxym0000gn/T/upload_8ca37763bdc48dbae84ad870d9706565' -> 'uploads/5f665750535579227429a47f/1200px-Node.js_logo.svg.png'"

stackHighlighted: "Error: EXDEV: cross-device link not permitted, rename '/var/folders/d8/b9tjfmtx3pj5z9gbf9tscxym0000gn/T/upload_8ca37763bdc48dbae84ad870d9706565' -> 'uploads/5f665750535579227429a47f/1200px-Node.js_logo.svg.png'"

[everythinginjs]

I have finally solved the problem by the error that I could get from response tab thank you dear @wojtek-krysiak it was a silly mistake of mine that I had relocated the project from desktop to my macintosh drive which it could not save pic to its love you for being beside me throughout this issue and I hope you make this amazing admin panel better and better.