Upload Widget error 404
Hi, I'm working on a project that uses the Upload Widget. A few months ago, it worked perfectly fine with my localhost, but now I noticed the Widget doesn't work anymore. On page load, it returns a 404 error.
On my production and staging servers, it works as intended.
I tried different CDN scripts, still the same 404.
I also went in my Cloudinary Dashboard to check for any config, but to no avail.
I tried using ngrok to make a tunnel for my localhost, and it worked.
So it seems I can't use the Upload Widget while developing...
Is there anything I can do ?
-
Hi @Alcéane,
Could you please share more details as to how you are attempting to open the page that hosts the Upload Widget when using localhost? Are you launching a local web server and accessing the HTML page with the Upload Widget via the local server or are you trying to open the HTML file directly in the browser?
0 -
Hi, thanks for your answer.
I'm using a local web server to access the page, the same I used months ago.
This page has the Upload Widget CDN, and once loaded, it creates the Upload Widget via createUploadWidget() method.
This is where a 404 is thrown.
0 -
Hi @Alcéane,
Thanks for responding. We will need more information in order to look into the issue. Could you please share the code you are using on your sample page to reproduce the issue locally? We can then try to launch the Widget the same way to see if it can be reproduced on our side. If you prefer to share this outside of this forum then please create a ticket with us using - https://support.cloudinary.com/hc/en-us/requests/new - and we can continue the investigation via a ticket.
0 -
The JS :
document.addEventListener("DOMContentLoaded", function () {
var myWidget = cloudinary.createUploadWidget(
{
cloudName: "my-cloud-name",
uploadPreset: "my-preset",
resourceType: "image",
sources: ["local"],
multiple: true,
context: {
alt: "Photo",
},
},
(error, result) => {
// doing things
}
);
document.getElementById("upload_widget").addEventListener(
"click",
function () {
myWidget.open();
false
);
});In the template :
// Button
<button id="upload_widget" class="btn btn-primary">Télécharger des photos</button>
// Script
<script src="https://upload-widget.cloudinary.com/global/all.js" type="text/javascript"></script>On page load, this is what appears in Chrome Network tab :
0 -
Hi @Alcéane,
Thanks for sharing that.
I see why I wasn't able to reproduce it when testing locally. When launching the local web server and accessing the HTML page locally, I was doing so via the 'localhost' hostname rather than 127.0.0.1. When accessing an HTML page locally with the Widget under localhost that request works but if accessing from an IP address directly, not just 127.0.0.1, I also get a 404.
Could you please try to access your page locally using localhost:8001 rather than 127.0.0.1:8001 and let me know if that works for you as well? That would also explain why it works for you in prod/staging because those won't be accessed by IP directly.
Alternatively, you can use https://upload-widget.cloudinary.com/2.1.15/global/all.js (current latest version) as the 'src' so that it avoids the need to redirect that then results in the issue.
In the meantime, I will look into that further internally about why it's happening.
0 -
I tried replacing 127.0.0.1 by localhost directly in the URL, and the widget worked as it should, no 404 🙂
Still, it is odd that this is happening now, whereas it used to work with 127.0.0.1 before.
Anyway, thanks a lot for your help, have a great day !
0 -
Hi @Alcéane,
Great to hear it worked for you.
Yes, I agree that it should definitely work with IP too. There is an internal ticket about that and once it's resolved I will update this thread to confirm so you can test via 127.0.0.1 too.
0
Post is closed for comments.
Comments
7 comments