I'm making an api getting a gif that uploads it to imgur,
but when requesting the api (express or postman),
i receive an error (everything works fine with other pictures):
{
data: {
error: {
code: 1001,
message: "Failed stripping metadata",
type: "Exception_Logged",
exception: {}
},
request: "/3/upload",
method: "POST"
},
success: false,
status: 500
}
How to avoid this error ? How to correct this picture ? "Adding metadata ?"
Is it due to the fact the picture was saved with ffmpeg ?
When i upload with the imgur pannel, everyting is fine,but not with the api
Thanks
https://imgur.com/xn4iG08
Note: i suppose the medata were removed by imgur, but I only can give that, thank you so much
I just ran into this issue. In my case the cause was the wrong encoding of the data in image parameter, it needs to be URL encoded (i.e. by using encodeURIComponent()).
My code uploads the contents of a Canvas object in PNG format and looks like this:
function encode(x)
{
return encodeURIComponent(x.substring(x.indexOf(",") + 1));
}
let xhr = new XMLHttpRequest();
xhr.onload = function(e) { console.log(e); };
xhr.onerror = function(e) { console.log(e); };
xhr.open("POST", "https://api.imgur.com/3/image");
xhr.setRequestHeader("Authorization", "Client-ID <your client id here>");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("image=" + encode(canvas.toDataURL()));
Related
I have the following method in a VueJS application:
const downloadImageBase64 = async imageUrl => {
try {
var result = await axios({
method: "get",
url: imageUrl,
responseType: 'blob',
crossdomain: true
});
return blobToBase64(result.data);
}
catch (err) {
console.log("err: ", err);
return "";
}
};
I am downloading images and returning them as a base64 strings because I'm embedding them into PDF's that I'm creating using JSPDF. The images themselves are hosted in AWS S3. I have the CORS policy set up in the appropriate S3 bucket:
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET"
],
"AllowedOrigins": [
"https://mydomain.co.za"
"http://localhost:8082"
],
"ExposeHeaders": [],
"MaxAgeSeconds": 3000
}
]
When running the app on my localhost, the image download succeeds with both FireFox and Chrome:
However, the moment I deploy the app to my staging environment, the download starts to fail with CORS issues, but only on Chrome. Looking at the request headers, no CORS info is even being sent:
I don't know if there's a preflight that Chrome is not showing in the network traffic, but the console gives me the following error:
Access to XMLHttpRequest at 'https://my-bucket.s3-eu-west-1.amazonaws.com/my-image-path.png' from origin 'https://mydomain.co.za' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
It turns out the issue is that I display the images on the webpage where the download PDF button is placed, which means that chrome caches these images and when attempting to download the images for the PDF, chrome is returning the cached images without the CORS headers. I more or less got the answer from here:
https://www.hacksoft.io/blog/handle-images-cors-error-in-chrome
So the solution is to append a throw-away get parameter to the URL when downloading for the PDF:
const downloadImageBase64 = async imageUrl => {
try {
var result = await axios({
method: "get",
url: `${imageUrl}?not-from-cache-please`,
responseType: 'blob',
crossdomain: true
});
return blobToBase64(result.data);
}
catch (err) {
console.log("err: ", err);
return "";
}
};
Note the:
url: `${imageUrl}?not-from-cache-please`
I need to upload an image directly to an S3 bucket. I am using react native, and react-native-image-picker to select a photo. This returns a local image uri. Here is my code right now.
ImagePicker.showImagePicker(options, response => {
var bodyFormData = new FormData(); // If I don't use FormData I end up
// uploading the json not an image
bodyFormData.append('image', {
uri: response.uri, // uri rather than data to avoid loading into memory
type: 'image/jpeg'
});
const uploadImageRequest = {
method: 'PUT',
url: presignedS3Url,
body: bodyFormData,
headers: {
'Content-Type: 'multipart/form-data'
}
};
axios(uploadImageRequest);
});
This almost works.. when I check my S3 bucket I have a file thats nearly an image. It has the following format
--Y_kogEdJ16jhDUS9qhn.KjyYACKZGEw0gO-8vPw3BcdOMIrqVtmXsdJOLPl6nKFDJmLpvj^M
content-disposition: form-data; name="image"^M
content-type: image/jpeg^M
^M
<Image data>
If I manually go in and delete the header, then I have my image! However, I need to be uploading an image directly to S3, which clients will be grabbing and expecting to already be in a proper image format.
I can make this work using response.data and decoding to a string and uploading that directly, but for the sake of memory I'd rather not do this.
Upload image to S3 from client using AJAX with presigned URL
It's been a while since you posted your question so I guess you already found a solution, but anyway... I was trying to do the same, i.e. upload an image to S3 using axios, but I just wasn't able to make it work properly. Fortunately, I found out that we can easily do the trick with plain AJAX:
const xhr = new XMLHttpRequest();
xhr.open('PUT', presignedS3Url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('Image successfully uploaded to S3');
} else {
console.log('Error while sending the image to S3.\nStatus:', xhr.status, "\nError text: ", xhr.responseText);
}
}
}
xhr.setRequestHeader('Content-Type', 'image/jpeg');
xhr.send({ uri: imageUri, type: 'image/jpeg', name: fileName});
This code is taken from this really useful article which borrows from this blog.
I cannot count how many times I sweared on CORS.
Right now we are trying to access the outlook API to send emails and stuff. We follow the tutorial, do everything on Postman and that works. Now we want to implement it in our Angular 2 application with the following code:
requestAccessToken(code: string)
{
if (code) {
var headers = new Headers();
headers.append("Content-Type", 'application/x-www-form-urlencoded');
var requestoptions = new RequestOptions({
headers: headers,
withCredentials: false // tried true too
})
let body = `grant_type=authorization_code&
redirect_uri=http://localhost:4200&
code=`+ code + `&
client_id=4e...ab&
client_secret=CE.....BC`
this.http.post("https://login.microsoftonline.com/common/oauth2/v2.0/token", body, requestoptions).subscribe((data) =>
{
console.log("data: " + data);
},
error =>
{
console.log("error: " + error);
});
}
}
Our response looks like this:
{
"token_type":"Bearer",
"scope":"calendars.read calendars.read.shared calendars.readwrite calendars.readwrite.shared contacts.read
contacts.read.shared mail.read
user.read",
"expires_in":3599,"ext_expires_in":0,
"access_token":"ey...NjQ",
"refresh_token":"OAQABAAA...Fd8JA"
}
Which is exactly but I want, but however I cannot extract the token out of it and my browser logs the following:
As you can see, the error is logged and not the data and Chrome complains about CORS. I'm really stuck and the only thing the internet says is to change server settings, which is of course not possible with the URL login.microsoftonline.com
I'm parsing remote data in to my app and uses it through arguments. One of the data types is a url adresse i want to open in the url. I have an idea that I have to open it with the openURL function but I can't seem to get it to work. Anyone have a working example?
You have to utilize in-built HttpClient
var url = "http://www.you_remote_url.com";
var client = Ti.Network.createHTTPClient({
// function called when the response data is available
onload : function(e) {
Ti.API.info("Received text: " + this.responseText);
alert('success');
},
// function called when an error occurs, including a timeout
onerror : function(e) {
Ti.API.debug(e.error);
alert('error');
},
timeout : 5000 // in milliseconds
});
// Prepare the connection.
client.open("GET", url);
// Send the request.
client.send();
I am trying to make a request to a server but im getting no records. When i run the code I am getting no error messages so I assume my code is working but when the callback function is executed on store load I just get a blank message.
var proxy = Ext.data.proxy.Ajax.create({
type:'ajax',
url:loginHostUri,
method:'POST',
headers:{
'Accept':'application/x-www-form-urlencoded'
},
extraParams:{
grant_type:'password',
username:username,
password:psswd,
client_id: consumerKey,
client_secret: consumerSecret
},
reader:{
type:'json',
root:''
}
});
var store = Ext.getStore('instance');
store.setProxy(proxy);
store.load({
callback:function(records,operation,success){
Ext.Msg.alert('INFO',records,Ext.emptyFn);
},
scope:this
});
The message is just blank but I know the Json response looks like this:
{
"":{
"id":"2332123",
"issued_at":"090342",
" instance_url":"instance",
"signature":"sig",
"access_token":"access"
}
}
define a fields or a model for the store
store.setFields({name: 'id', name: 'issued_id' ...});(put this before store.load())
Try that and console.log(records) under callback and reply back what you get...