This here is js file download code which works for other servers but does not work on shopify.
This is error on shopify
url: 'https://cdn.shopify.com/s/files/1/0518/1269/6219/files/sample-3s.mp3',
method: 'GET',
async:true,
crossDomain:true,
headers:{'Content-Type':'audio/mpeg','X-Requested-With':'XMLHttpRequest'},
processData: false,
dataType: 'binary',
xhrFields: {
responseType: 'blob'
},
success: function (data) {
var a = document.createElement('a');
var url = window.URL.createObjectURL(data);
a.href = url;
a.download = 'sample-3s.mp3';
document.body.append(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);
}
});
});```
Related
I have tried many different combination for AJAX Setup in order to send the formData to controller. Somehow I cannot get the form input inside my controller despite trying to return it will all type of ways. May I know what did I miss that causing me not be able to get the input in controller?
$("#formCropUpdate").on("submit", function (event) {
event.preventDefault();
var formId = $('#formId').val();
var url = '/Form/' + formId;
var form = this;
formData = new FormData(form);
console.log(Array.from(formData));
$.ajax({
url: url,
type: "PATCH",
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
cache: false,
dataType: false,
contentType: false,
processData: false,
data:formData,
success: function (response) {
console.log(response);
return false;
},
});
});
public function update(Request $request){
$UserId = Auth::user()->id;
$Company = Company::where('id', Auth::user()->company_id)->first();
return $request->all();
}
use
<meta name="csrf-token" content="{{ csrf_token() }}">
in head
and jQuery code
$('#form_submit').submit(function (e) {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
e.preventDefault();
var base = window.location.origin;
let formData = new FormData(this);
let my_url = base + "/article-store";
$.ajax({
type: 'post',
url: my_url,
data: formData,
cache: false,
contentType: false,
processData: false,
success: (data) => {
},
error: function (data) {
}
});
});
After quite a bit of digging, since what I am doing is using the PATCH request, it's still not working as of now with FormData. To solve it, we need to spoof the method by appending the PATCH method to formData and our AJAX settings to be changed to POST. Then you'll receive all the request inside your controller.
Reference:
https://laracasts.com/discuss/channels/laravel/ajax-formdata-and-put-fails
https://laracasts.com/discuss/channels/javascript/axiosajax-http-patch-requests-with-file-not-working
$("#formCropUpdate").on("submit", function (event) {
event.preventDefault();
var formId = $('#formId').val();
var url = '/Form/' + formId;
var form = this;
formData = new FormData(form);
formData.append('_method', 'PATCH');
console.log(Array.from(formData));
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url: url,
data:formData,
cache: false,
contentType: false,
processData: false,
success: function (response) {
console.log(response);
return false;
},
});
});
Now my download is ok. I think use a progress bar is better. I see this: https://docs.laravel-excel.com/3.1/imports/progress-bar.html
But it's for imports. And I want to use in blade, ajax. Can someone give me some suggestion?
<script type="text/javascript"><!--
$('#button-export-save').on('click', function () {
var dataString = $('#excel-form').serialize();
$.ajax
({
type: "POST",
url: "{{ route('lang.admin.member.members.export') }}",
data: dataString,
cache: false,
xhrFields:{
responseType: 'blob'
},
success: function(data)
{
var link = document.createElement('a');
link.href = window.URL.createObjectURL(data);
link.click();
},
fail: function(data) {
alert('Not downloaded');
}
});
});
//--></script>
enter image description here
I am trying to download audio or video but shows this error.
Here is my code.
$.ajax({
url: 'https://cdn.shopify.com/s/files/1/0518/1269/6219/files/sample-3s.mp3',
method: 'GET',
async:true,
crossDomain:true,
headers:{'Content-Type':'audio/mpeg','X-Requested-With':'XMLHttpRequest'},
processData: false,
dataType: 'binary',
xhrFields: {
responseType: 'blob'
},
success: function (data) {
var a = document.createElement('a');
var url = window.URL.createObjectURL(data);
a.href = url;
a.download = 'sample-3s.mp3';
document.body.append(a);
a.click();
a.remove();
window.URL.revokeObjectURL(url);
}
});
});```
I would like to ask if there is a method to parse data from $.ajax() to $.getJSON() please?
This is the $.ajax() example:
var apiUrl = 'https://api.com/url_here';
var apiKey = 1234567890;
var apiSecret = 0987654321;
var data = {};
$.ajax({
url: apiUrl,
headers: {
"Authorization": "Basic " + btoa(apiKey+ ":" + apiSecret)
},
data: data,
dataType: 'json',
type: 'GET',
success: function(data) {
console.log(data);
},
error: function(data) {
console.log(data);
}
});
And this is what I have in my $.getJSON(), where I have a struggle in calling the headers for authentication:
$.getJSON(apiUrl, function(json){
console.log(JSON.stringify(json));
});
Thanks a lot! xxx
I am trying to do the image ajax upload using Express4 and multer, but it doesn't work
here is my request screenshot
and here is the server script
var multer = require('multer');
var upload = multer({ dest: 'uploads/' });
var router = express.Router();
router.route('/upload')
.post(upload.single('file'), function(req, res) {
console.log(req.file);
//req.file is undefined
});
updated client code:
import Ember from 'ember';
export default Ember.TextField.extend({
type: 'file',
change: function(e) {
var inputFiles = e.target.files;
var inputFile = inputFiles[0];
var formData = new FormData();
formData.append('file', inputFile);
Ember.$.ajax({
type: 'POST',
url: '/upload',
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data) {
console.log(data);
},
error: function(err) {
console.error(err)
}
})
}
});