-4

I am trying to use jquery to change the data-url attribute used by a file upload. But it doesn't seems to be working. The file upload takes the old value.

$('#fileupload').attr('data-url', "https://api.mysite.com/optimizeonly");

HTML

<input id="fileupload" class="fileupload" type="file" name="file[]" data-url="https://api.mysite.com/upload" multiple="">`

Snippet:

$('#fileupload').attr('data-url', "https://api.mysite.com/optimizeonly");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="fileupload" class="fileupload" type="file" name="file[]" data-url="https://api.mysite.com/upload" multiple="">

Edit : 1

I am using jquery file upload module , i though this was evident from the tags. The whole code is available from the live demo (just inspect element)

user2650277
  • 6,289
  • 17
  • 63
  • 132
  • I edited your question. Your code is working fine, you can inspect the element and see it in the snippet. – cнŝdk Mar 27 '17 at 09:49
  • @chsdk the `data-url doesn't change...jquery is already included ....please refresh and look at the end – user2650277 Mar 27 '17 at 09:57
  • `jquery.data()` didn't work but `attr` did.Even though the data url change how come the post alraedy go to `/upload` instead of `/optimizeonly` – user2650277 Mar 27 '17 at 10:03
  • Maybe because the url update is done after page loading try to wrp your JS code in `$(document).ready(function)({ //Your code here });` – cнŝdk Mar 27 '17 at 10:09
  • @chsdk its already inside a ready – user2650277 Mar 27 '17 at 10:16
  • jQuery's `.data()` is a bit tricky: if you do not have a HTML5 data- attribute declared for the element, then jQuery will modify the internal data without actually reflecting the changes in the DOM. However, in your case, since the `data-url` attribute is already specified, using `.attr()` or `.data()` should work just fine – Terry Mar 27 '17 at 11:12
  • @Terry i managed to make the data-url change but somehow the fileupload still make a POST to old data-url...ctrl + F5 and check the live demo – user2650277 Mar 27 '17 at 13:03
  • 2
    The `data-url` HTML5 attribute is not a standard--you must be using a third party plugin to handle file uploads. I do not see any inclusion of said plugin in your code example, so of course the attribute will not be used? – Terry Mar 27 '17 at 13:05
  • Perhaps use the list version: `$('#fileupload').fileupload('add', {files: $(".fileupload").map(function() { return $(this).data("url") }) });` since the data-url is already consumed when you assign the fileupload to the element – mplungjan Mar 27 '17 at 13:06
  • @mplungjan where should i add this line.Can you post an answer – user2650277 Mar 27 '17 at 13:28
  • @mplungjan where should i add this line....?.Do a ctrl+F5 as there is just one document ready function – user2650277 Mar 27 '17 at 13:39
  • Where you do $(".fileupload").fileupload.... instead of autosubmit – mplungjan Mar 27 '17 at 13:58
  • @mplungjan i already have an add callback...can you please check my code and post your revision as an answer – user2650277 Mar 27 '17 at 14:04
  • On your page the submit is commented out. Anyway I do not have time to figure out how the fileupload works. – mplungjan Mar 27 '17 at 14:22
  • 1
    Could you add to the question that you are using a [plugin](https://github.com/blueimp/jQuery-File-Upload) to handle the file upload? This is vital information for answering the question. – Just a student Mar 29 '17 at 14:06
  • `data-url` means nothing here. Check here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input The input doesn't have this attr. The question would be solved immediately after you posting **all** of your code. – blackmiaool Mar 29 '17 at 14:08
  • @Justastudent I already indicated that i am using jquery file upload plugin in the tags – user2650277 Mar 30 '17 at 06:13
  • @blackmiaool live demo is provide just do inspect element – user2650277 Mar 30 '17 at 06:14
  • @user2650277 Yes, I noticed that after having looked at the question for some time. Not everybody looks at the tags. Just trying to help you improve your question :-) – Just a student Mar 30 '17 at 06:30
  • @Justastudent Sure. This is a [xy problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) – blackmiaool Mar 30 '17 at 07:02

2 Answers2

1

The data-url attribute of the input is read by the plugin when initializing. It is not automatically read afterwards. Have you tried updating the URL as follows?

var fu = $('#fileupload');
fu.fileupload('option', 'url', fu.data('url'));

Of course, this would be done after updating the data-url attribute of the element using

fu.data('url', 'new-url-you-want-here');

and you could, I think, skip updating the attribute altogether and only change the option of the plugin.

fu.fileupload('option', 'url', 'new-url-you-want-here');
Just a student
  • 10,560
  • 2
  • 41
  • 69
0

Can read the data-url property and revise it

    var fu = $('#mainplayer');
    fu[0].dataset.url = "Hello";
    console.log(fu[0].dataset.url);
Muhammad Abrar Anwar
  • 347
  • 3
  • 2