UploadFiles() get stuck in response in MOBILE whereas it works fine in DESKTOP environment

Ask the community
,
1

Somehow, this code works fine in Wix Preview and in Published, when it’s on DESKTOP environment, but only works in PREVIEW in MOBILE environment.

it seems to get stuck on the PRELOADER which doesn’t replace the ImagePlaceHolder.

the error seems to happen after the …

                let save = await app.loadFile(f, { "type": event.target.fileType });

1144×597 44.6 KB

1133×594 121 KB

2255×1200 311 KB

2262×1203 382 KB

2250×1193 357 KB

//Page code
//-----------
import * as app from 'backend/dev/files/app';
$w.onReady(function () {
    $w('#dropdown1').onChange((event) => {
        let value = event.target.value.tolowercCase();

        if (value !== "select file type") {
            $w('#uploadButton').fileType = value;
            $w('#uploadButton').enable();
        } else {
            $w('#uploadButton').disable();
        }
    });
    $w('#uploadButton').onChange(async (event) => {
        let files = event.target.value;
        if (files.length > 0) { // sidte visitor chose files
            console.log("uploading the following files: ", files);
            $w('#imagePreloader').show();
            let uploadedFiles = await $w('#uploadButton').uploadFiles();
            files.map((f, findex) => {
                console.log(f.name, f.size, f.valid);
                let i = 0;
                do {
                    let uploadedFile = uploadedFiles[i];
                    uploadedFile[`ogName`] = f.name;
                    uploadedFile[`size`] = f.size;
                    i++;
                } while (i < uploadedFiles.length);
            });
            console.log(uploadedFiles);
            //save to collection
            uploadedFiles.map(async (f, findex) => {
                $w('#imagePreloader').show();
                let save = await app.loadFile(f, { "type": event.target.fileType });
                if (save) {
                    $w('#imagePreloader').hide();
                    console.log("File url: " + f.fileUrl);
                    setTimeout(() => {
                        $w('#imagePlaceHolder').src = f.fileUrl;
                        $w('#imagePlaceHolder').alt = files[findex].name;
                        $w('#imagePlaceHolder').tooltip = `${f.width} x ${f.height}`;
                        $w('#imagePlaceHolder').show();
                    },3000)
                    console.log("Upload & save successfull.");
                 } else {
                     $w('#imagePreloader').hide();
                     console.log("Upload & save unsuccessfull.");
                     console.log(save.err, save.stack);
                 }
            })
        }
    })
});

//---------------------------------
// backend code. app.jsw
import * as app from 'backend/dev/files/manage';

export function loadFile(info,opt) {
    return app.saveUpload(info, opt);
}

//---------------------------------
// backed code.  manage.js
import wixData from 'wix-data';
import wixMediaBackend from 'wix-media-backend';

const optionsTT = {
    "supressAuth": true,
    "suppressHooks": true
};

export async function saveUpload(fileInfo, options) {
    try {
        let type = options.type || '',
            fileNameSplit = String(fileInfo.ogName).split("."),
            originalFileName = fileInfo.ogName;

        if (fileNameSplit.length > 2) { fileNameSplit.splice(fileNameSplit.length - 1) }
        let fileName = (fileNameSplit.length > 2) ? fileNameSplit.join(".") : fileNameSplit[0];

        if (fileInfo.fileName) { // change fileName to something else. May cause confusionm. wix:image://v1/cec60b_43`b9917d7f64cb28be929a96a82cd13~mv2.png/google%app%20script.png#originWidth-512&originHeight=512
            let mediaManagerInfo = await wixMediaBackend.mediaManager.getFileInfo(fileInfo.fileName);
            let info = {
                "mediaManagerInfo": mediaManagerInfo,
                "originalFileName": originalFileName,
                "size": fileInfo.size,
                "width": fileInfo.width,
                "height": fileInfo.height,
                "url": "",
                "isSearchable": false,
                "fileName": fileName,
                "fileType": type,
                "title": fileName
            }
            if (fileInfo.duration) {
                info["duration"] = fileInfo.duration;
            }
            info[`${((String(type).toLowerCase() === "document") ? "doc": String(type).toLowerCase())}`] = `${mediaManagerInfo.fileUrl}`;

            switch (String(type).toLowerCase()) {
            case "image":
                info["url"] = `https://static.wixstatic.com/media/${mediaManagerInfo.fileName}`;
                break;
            case "video":
                info["url"] = `https://8b7eef41-7fbb-440b-928a-a442878112a3.usrfiles.com/ugd/${mediaManagerInfo.fileName}/1080p/mp4/file.mp4`;
                break;
            case "document":
                info["url"] = `https://static.wixstatic.com/media/${mediaManagerInfo.fileName}`;
                break;
            case "audio":
                info["url"] = `https://static.wixstatic.com/mp3/${mediaManagerInfo.fileName}`;
                break;
            }

            return wixData.save("files", info, optionsTT).then((res) => {
                if (res) {
                    // Send back specific information
                    console.log(info, res);
                    return { "result": true }
                }
            });
        } else {
            throw "No file Name";
        }

    } catch (err) {
        return { "result": false, "err": err, "stack": err.stack };
    }
}