0

I am facing the problem in redirecting to index page. Instead page refreshes to same create page perhaps due to large size images are still copying but why page refreshing instead of images waiting copying to finish and then redirecting.

    module.exports.create_customModel_post = async (req, res) => {
    const {images} = req.files
    
    let myPromise = []

    if (images) {
        const dir = `./public/${req.body.slug}`
        fs.mkdirSync(dir, { recursive: true });
        
        for (let i = 0; i < images.length; i++) {

            const uploadTo = `${dir}/${images[i].name}`            

            myPromise.push(new Promise(function(resolve, reject) {
                
                images[i].mv(uploadTo, (err) => {                    
                    if(err){
                        reject(err);
                    }else{
                        resolve(uploadTo);
                    } 
                });
            }));            
        }
    }    
    
    Promise.all(myPromise).then(function(values) {
        console.log(values),
        // THIS REDIRECT IS NOT WORKING
        res.redirect('/admin/custom-models')
    }).catch(function (reasons) {
        console.log(reasons);
    });    
}

Response from server

POST /admin/create-custom-model - - ms - -
new model is created & saved
[
  './public/testing/attachment_48549925.svg',
  './public/testing/brand-name.png',
  './public/testing/design.svg',
  './public/testing/model-name.png',
  './public/testing/path9080.png',

]
GET /admin/create-custom-model 200 12.375 ms - -

here is form I am using. Removed extra

<main>
    <section class="">
        <div class="container">
            <h1>Create Custom Model</h1>
            <table class="">
                <form enctype="multipart/form-data" method="post">
                                 
                  
                    
                    <tr>
                        <td></td>
                        <td>
                            <input type="file" name="images" multiple>
                            
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                    </tr>
                    <tr>
                        <td><a href="/admin/custom-models">Cancel</a> </td>
                        <td><button type="submit" >Save</button></td>
                    </tr>
                </form>
            </table>
        </div>
    </section>
</main>
  • Is it really true that the `mv` method callback takes a single error param? no success param? – danh Jun 08 '22 at 00:36
  • I did not understand exactly your question. but files does move without error, it just take time. and during this time page refreshes. – Muhammad Amir Jun 08 '22 at 00:39
  • images[i].mv is express-fileupload function to move files to destination directory. – Muhammad Amir Jun 08 '22 at 00:41
  • 1
    What exactly is the http response your server is sending? – Bergi Jun 08 '22 at 00:44
  • POST /admin/create-custom-model - - ms - - new model is created & saved [ '...'] GET /admin/create-custom-model 200 12.375 ms - - – Muhammad Amir Jun 08 '22 at 00:49
  • @danh that is indeed how it works ~ https://github.com/richardgirges/express-fileupload/blob/master/lib/utilities.js#L64 – Phil Jun 08 '22 at 01:01
  • 1
    @MuhammadAmir You haven't shared the raw http response that the client receives but rather the server access log. Still, from what we can see there, it works as expected - the client makes a POST request, receives the redirect, and then fetches the redirect target with a GET request. What exactly is the problem? – Bergi Jun 08 '22 at 01:08
  • @Bergi sorry I am not sure what you are asking. are you asking about chrome network tab data – Muhammad Amir Jun 08 '22 at 01:16
  • @Bergi the redirect should be `/admin/custom-models` (according to OP's code) but is actually `/admin/create-custom-model` – Phil Jun 08 '22 at 01:16
  • @MuhammadAmir are you sure your app is running the code in your question? Have you made sure all changes are saved and the server is restarted? If you're using `nodemon`, try stopping and restarting it – Phil Jun 08 '22 at 01:17
  • @Phil I am working on this problem several days and restarted computer several time. Also restarted vscode a couple of time to check if there is any bug. even commented out all code in controller to check if same controller is working. no problem found. If a small files upload then code works as expected but when larges files get uploaded page refreshes but images and database does get updated. – Muhammad Amir Jun 08 '22 at 01:20
  • @MuhammadAmir that kind of sounds like a client-side problem. How are you making the request? What triggers the request to start? – Phil Jun 08 '22 at 01:25
  • @phil I am using the post form to upload the file no ajas. I just check right now by uploading 12 images of 10kb each and code worked fine (it redirected to right location), it is just due to large file size. – Muhammad Amir Jun 08 '22 at 01:30
  • @Bergi the problem is when I upload a large image it takes time to copy to folder but the code reaches to end and refresh the page instead wait for files to finish copying. if my the end of code files have copied to location then code works perfectly fine. – Muhammad Amir Jun 08 '22 at 01:52
  • What makes you think it reaches the end (I presume you mean the `then` handler with the `res.redirect()` call) without waiting for the copying to finish? – Bergi Jun 08 '22 at 02:00
  • @bergi I wrapped Promised.all(myPromise).then() inside a setTimeout and set it to 20 second time. The page refreshed instantly and after 20 second I saw resolve log. – Muhammad Amir Jun 08 '22 at 05:27
  • 1
    @MuhammadAmir That sounds like something else (not in the code you posted so far) is also responding to the request. – Bergi Jun 08 '22 at 10:08

0 Answers0