Reading a file from html to jquery and then uploading it to ajax [duplicate]












1
















This question already has an answer here:




  • JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request - several elements

    8 answers



  • JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request

    1 answer



  • submit form with ajax but get “Illegal Invocation”

    1 answer



  • How can I upload files asynchronously?

    31 answers




I have an input tag in HTML



<input id="fileId" type="file" name="fileId" style="display:none;">



I need to receive this file object in javascript to pass it in back-end through ajax.



I am using below line to get file object.



var fileObject = $('#fileId').prop('files')[0]


I am able to receive the file object with this line of code.



and my ajax code is:



$.ajax({

  type: 'POST',

  url: '/urlname/',

  data: {"file_object": fileObject},

  success: function(data) {

    console.log(data)

 }

});


I am not able to execute the ajax code since it producing Illegal invocation error while parsing the object through the ajax.
below is the error trace:



jquery.min.js:2 Uncaught TypeError: Illegal invocation

    at i (jquery.min.js:2)

    at jt (jquery.min.js:2)

    at Function.w.param (jquery.min.js:2)

    at Function.ajax (jquery.min.js:2)

    at HTMLButtonElement.<anonymous> (index.js:36)

    at HTMLButtonElement.dispatch (jquery.min.js:2)

    at HTMLButtonElement.y.handle (jquery.min.js:2)

    i @ jquery.min.js:2

    jt @ jquery.min.js:2

    w.param @ jquery.min.js:2

    ajax @ jquery.min.js:2

    (anonymous) @ index.js:36

    dispatch @ jquery.min.js:2

    y.handle @ jquery.min.js:2


Also, I need to read this file object in Django's views.py.






javascript jquery ajax







share|improve this question















marked as duplicate by mplungjan javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Jan 3 at 5:59


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • Minimum effort - you are not sending the correct data type

    – mplungjan
    Jan 3 at 6:01











  • @mplungjan I am sending an excel file object, what should be the correct data type?

    – bSr
    Jan 3 at 6:07











  • You should use the correct data type - look at the newest posts from here: google.com/…

    – mplungjan
    Jan 3 at 6:10
















1
















This question already has an answer here:




  • JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request - several elements

    8 answers



  • JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request

    1 answer



  • submit form with ajax but get “Illegal Invocation”

    1 answer



  • How can I upload files asynchronously?

    31 answers




I have an input tag in HTML



<input id="fileId" type="file" name="fileId" style="display:none;">



I need to receive this file object in javascript to pass it in back-end through ajax.



I am using below line to get file object.



var fileObject = $('#fileId').prop('files')[0]


I am able to receive the file object with this line of code.



and my ajax code is:



$.ajax({

  type: 'POST',

  url: '/urlname/',

  data: {"file_object": fileObject},

  success: function(data) {

    console.log(data)

 }

});


I am not able to execute the ajax code since it producing Illegal invocation error while parsing the object through the ajax.
below is the error trace:



jquery.min.js:2 Uncaught TypeError: Illegal invocation

    at i (jquery.min.js:2)

    at jt (jquery.min.js:2)

    at Function.w.param (jquery.min.js:2)

    at Function.ajax (jquery.min.js:2)

    at HTMLButtonElement.<anonymous> (index.js:36)

    at HTMLButtonElement.dispatch (jquery.min.js:2)

    at HTMLButtonElement.y.handle (jquery.min.js:2)

    i @ jquery.min.js:2

    jt @ jquery.min.js:2

    w.param @ jquery.min.js:2

    ajax @ jquery.min.js:2

    (anonymous) @ index.js:36

    dispatch @ jquery.min.js:2

    y.handle @ jquery.min.js:2


Also, I need to read this file object in Django's views.py.






javascript jquery ajax







share|improve this question















marked as duplicate by mplungjan javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Jan 3 at 5:59


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.



















  • Minimum effort - you are not sending the correct data type

    – mplungjan
    Jan 3 at 6:01











  • @mplungjan I am sending an excel file object, what should be the correct data type?

    – bSr
    Jan 3 at 6:07











  • You should use the correct data type - look at the newest posts from here: google.com/…

    – mplungjan
    Jan 3 at 6:10














1












1








1









This question already has an answer here:




  • JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request - several elements

    8 answers



  • JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request

    1 answer



  • submit form with ajax but get “Illegal Invocation”

    1 answer



  • How can I upload files asynchronously?

    31 answers




I have an input tag in HTML



<input id="fileId" type="file" name="fileId" style="display:none;">



I need to receive this file object in javascript to pass it in back-end through ajax.



I am using below line to get file object.



var fileObject = $('#fileId').prop('files')[0]


I am able to receive the file object with this line of code.



and my ajax code is:



$.ajax({

  type: 'POST',

  url: '/urlname/',

  data: {"file_object": fileObject},

  success: function(data) {

    console.log(data)

 }

});


I am not able to execute the ajax code since it producing Illegal invocation error while parsing the object through the ajax.
below is the error trace:



jquery.min.js:2 Uncaught TypeError: Illegal invocation

    at i (jquery.min.js:2)

    at jt (jquery.min.js:2)

    at Function.w.param (jquery.min.js:2)

    at Function.ajax (jquery.min.js:2)

    at HTMLButtonElement.<anonymous> (index.js:36)

    at HTMLButtonElement.dispatch (jquery.min.js:2)

    at HTMLButtonElement.y.handle (jquery.min.js:2)

    i @ jquery.min.js:2

    jt @ jquery.min.js:2

    w.param @ jquery.min.js:2

    ajax @ jquery.min.js:2

    (anonymous) @ index.js:36

    dispatch @ jquery.min.js:2

    y.handle @ jquery.min.js:2


Also, I need to read this file object in Django's views.py.






javascript jquery ajax







share|improve this question

















This question already has an answer here:




  • JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request - several elements

    8 answers



  • JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request

    1 answer



  • submit form with ajax but get “Illegal Invocation”

    1 answer



  • How can I upload files asynchronously?

    31 answers




I have an input tag in HTML



<input id="fileId" type="file" name="fileId" style="display:none;">



I need to receive this file object in javascript to pass it in back-end through ajax.



I am using below line to get file object.



var fileObject = $('#fileId').prop('files')[0]


I am able to receive the file object with this line of code.



and my ajax code is:



$.ajax({

  type: 'POST',

  url: '/urlname/',

  data: {"file_object": fileObject},

  success: function(data) {

    console.log(data)

 }

});


I am not able to execute the ajax code since it producing Illegal invocation error while parsing the object through the ajax.
below is the error trace:



jquery.min.js:2 Uncaught TypeError: Illegal invocation

    at i (jquery.min.js:2)

    at jt (jquery.min.js:2)

    at Function.w.param (jquery.min.js:2)

    at Function.ajax (jquery.min.js:2)

    at HTMLButtonElement.<anonymous> (index.js:36)

    at HTMLButtonElement.dispatch (jquery.min.js:2)

    at HTMLButtonElement.y.handle (jquery.min.js:2)

    i @ jquery.min.js:2

    jt @ jquery.min.js:2

    w.param @ jquery.min.js:2

    ajax @ jquery.min.js:2

    (anonymous) @ index.js:36

    dispatch @ jquery.min.js:2

    y.handle @ jquery.min.js:2


Also, I need to read this file object in Django's views.py.





This question already has an answer here:




  • JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request - several elements

    8 answers



  • JQuery: 'Uncaught TypeError: Illegal invocation' at ajax request

    1 answer



  • submit form with ajax but get “Illegal Invocation”

    1 answer



  • How can I upload files asynchronously?

    31 answers







javascript jquery ajax




javascript jquery ajax






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Jan 3 at 5:58









mplungjan

89.7k22127184




89.7k22127184










asked Jan 3 at 5:55









bSrbSr

339415




339415




marked as duplicate by mplungjan javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Jan 3 at 5:59


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.









marked as duplicate by mplungjan javascript
Users with the  javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.

StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;

$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');

$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
 Jan 3 at 5:59


This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.















  • Minimum effort - you are not sending the correct data type

    – mplungjan
    Jan 3 at 6:01











  • @mplungjan I am sending an excel file object, what should be the correct data type?

    – bSr
    Jan 3 at 6:07











  • You should use the correct data type - look at the newest posts from here: google.com/…

    – mplungjan
    Jan 3 at 6:10



















  • Minimum effort - you are not sending the correct data type

    – mplungjan
    Jan 3 at 6:01











  • @mplungjan I am sending an excel file object, what should be the correct data type?

    – bSr
    Jan 3 at 6:07











  • You should use the correct data type - look at the newest posts from here: google.com/…

    – mplungjan
    Jan 3 at 6:10

















Minimum effort - you are not sending the correct data type

– mplungjan
Jan 3 at 6:01





Minimum effort - you are not sending the correct data type

– mplungjan
Jan 3 at 6:01













@mplungjan I am sending an excel file object, what should be the correct data type?

– bSr
Jan 3 at 6:07





@mplungjan I am sending an excel file object, what should be the correct data type?

– bSr
Jan 3 at 6:07













You should use the correct data type - look at the newest posts from here: google.com/…

– mplungjan
Jan 3 at 6:10





You should use the correct data type - look at the newest posts from here: google.com/…

– mplungjan
Jan 3 at 6:10












0






active

oldest

votes

















0






active

oldest

votes








0






active

oldest

votes









active

oldest

votes






active

oldest

votes

-

Popular posts from this blog

Monofisismo

Image
Monofisismo (do grego: monos - "único, singular" e physis - "natureza") é o ponto de vista cristológico que defende que, depois da união do divino e do humano na encarnação histórica, Jesus Cristo, como encarnação do Filho ou Verbo ( Logos ) de Deus, teria apenas uma única "natureza", a divina, e não uma síntese de ambas. O monofisismo é contraposto pelo diofisismo (ou "diafisismo"), que defende que Jesus preservou em si as duas naturezas. Historicamente, o monofisismo se refere primordialmente à posição dos que (especialmente no Egito e, em menor grau, na Síria) rejeitaram as decisões do Concílio de Calcedônia em 451 (o quarto concílio ecumênico). Os membros mais moderados entre eles, porém, defendem a teologia "miafisita", que se tornou a oficial para as Igrejas Ortodoxas Orientais. Muitos ortodoxos orientais, porém, rejeitam essa classificação, mesmo como um termo genérico, mas ele é amplamente utilizado na literatura históri...
Read more

Angular Downloading a file using contenturl with Basic Authentication

Image
0 I have a contentUrl when user clicks on that,file should be downloaded. If I try to browse the contentUrl in the browser it asks for Userid and password.I believe this is Basic Authentication.I dont want user to enter UserId and Password so I am passing it Authorization(Please see below code). Url looks some thing like this: http://XXX.XXX.XX.XXX:8080/flowable-rest/service/runtime/tasks/90875/attachments/90555/content let username : string = 'admin'; let pwd : string = 'test'; let headers = new Headers(); headers.set('Accept', 'text/json'); headers.append('Content-Type', 'application/json'); headers.set('Access-Control-Allow-Origin', '*'); headers.set('Access-Control-Allow-Methods','POST, GET, OPTIONS, PUT, DELETE'); head...
Read more

Olmecas

Image
Monumento 1, uma das quatro cabeças colossais encontradas em La Venta, com altura aproximada de 3 metros Olmecas é a designação do povo e da civilização que estiveram na origem da antiga cultura pré-colombiana da Mesoamérica e que se desenvolveram nas regiões tropicais do centro-sul do atual México durante o pré-clássico, próximo de onde hoje estão localizados os estados mexicanos de Veracruz e Tabasco, no Istmo de Tehuantepec, numa zona designada área nuclear olmeca. A cultura olmeca floresceu nesta região aproximadamente entre 1500 e 400 a.C., [ 1 ] e crê-se que tenha sido a civilização-mãe de todas as civilizações mesoamericanas que se desenvolveram posteriormente. [ 2 ] No entanto, desconhece-se a sua exacta filiação étnica, ainda que existam numerosas hipóteses colocadas para tentar resolver esta questão. O etnónimo olmeca foi cunhado pelos arqueólogos do século XX, e não devem confundir-se com os muito posteriores olmecas-xicalancas que ocuparam vários locais do México...
Read more