Réagir indigènes télécharger l'image d'amazones s3

Je veux télécharger des images à partir de mon appli pour S3 serveur. J'ai toutes les données et les codes de calcul (testé à l'aide de curl sur ordinateur), mais je ne peux pas comprendre comment appeler chercher correctement. Je reçois la réponse:

'Au moins l'une des conditions préalables que vous avez spécifié n'a pas tenu. Condition: Seau POST doit être de l'un boîtier de type multipart/form-data'

Comment puis-je recréer les données de formulaire dans réagissent-autochtones chercher? Il n'y a pas de FormData à qui je peux ajouter et ensuite l'envoyer comme dans l'extrait exemple.

EDIT:
Merci @philipp-von weitershausen, greate que vous avez ajouté cette fonctionnalité. Toutefois, j'ai quelques problèmes en l'appelant. Je suis "non pris en charge BodyInit type". Trouvé c'est parce que dans fetch.js: "prise en charge.formData" renvoie la valeur false. Ce qui me manque quand je l'appelle chercher?

Mon exemple de code:

 var form = new FormData();
 form.append("FormData", true)
 form.append("name", this.state.invoiceNumber)
 form.append("key", this.state.invoiceNumber)
 form.append("Content-Type", "image/png")
 form.append('file', this.props.uri)
 //alert(FormData.prototype.isPrototypeOf(form))

  fetch(amazon_url,{body: form,mode: "FormData", method: "post", headers: {"Content-Type": "multipart/FormData"}})
          .then((response) => response.json())
          .catch((error) => {
             alert("ERROR " + error)
          })
          .then((responseData) => {
             alert("Succes "+ responseData)
          })
          .done();

Avez-vous un exemple de votre travail final de code pour cela? Je vais avoir des ennuis trop.
En fait, vous avez un exemple de juste être en mesure de publier les variables de formulaire (sans les images, vu que la prochaine RN construire ajoute le support de l'image).
réagissent-native-fetch-blob peut le faire pour vous.

InformationsquelleAutor Michał Zubrzycki | 2015-06-09

Certaines personnes ont demandé, donc je vais l'afficher comment je l'ai fait. Il a été fait calme, il y a longtemps donc si vous avez des commentaires ou quelque chose est vraiment mal fait, je suis ouvert à la critique 😉
La Photo est à lire à partir de cameraRoll et stockés dans latestPhoto'.

Le téléchargement de photo pour S3 serveur:

Etape 1: Générer des données:

_addTextParam() {
    var textParams = this.state.textParams;
    s3_upload_id = this.makeid()
    textParams.push({ name: "key", value: this.state.upload_path + s3_upload_id + '/' + this.state.att_name + ".jpg" })
    textParams.push({ name: "AWSAccessKeyId", value: this.state.key })
    textParams.push({ name: "acl", value: "public-read" })
    textParams.push({ name: "success_action_status", value: "201" })
    textParams.push({ name: "policy", value: this.state.policy })
    textParams.push({ name: "signature", value: this.state.signature })
    textParams.push({ name: "Content-Type", value: "image/jpeg" })

    this.setState({ textParams: textParams });
  }

Étape 2: Envoyer des données:

  _send() {
this._addTextParam()
var xhr = new XMLHttpRequest();
xhr.open('POST', "http://" + this.state.fs_domain + "." + this.state.server);
xhr.onload = () => {
this.setState({ isUploading: false });
if (xhr.status !== 201) {
AlertIOS.alert( 
'Upload failed',
'Expected HTTP 200 OK response, got ' + xhr.status + "/" + xhr.responseText
);
return;
}
if (!xhr.responseText) {
AlertIOS.alert(
'Upload failed',
'No response payload.'
);
return;
}
var index = xhr.responseText.indexOf( "http://" + this.state.fs_domain + "." + this.state.server);
if (index === -1) {
AlertIOS.alert(
'Upload failed',
'Invalid response payload.'
);
return;
}
var url = xhr.responseText.slice(index).split('\n')[0];
this.state.s3_file_id = xhr.responseText.split('Tag>"')[1].split('"')[0]
this.state.s3_file_path = xhr.responseText.split('Location>')[1].split('<')[0]
this.setState({ isUploading: false });
RCTDeviceEventEmitter.emit('Uploaded')
};
var formdata = new FormData();
this.state.textParams.forEach((param) => {
formdata.append(param.name, param.value)
}
);
formdata.append('file', {...this.state.latestPhoto, name: (this.state.att_name+".jpg") });
xhr.send(formdata);
this.setState({ isUploading: true });
},

Et latestPhoto est binaire? Je me demandais comment cela fonctionne.
Et comment avez-vous générer la signature? Tous les modules que j'ai trouvé en ligne dépend de certains nœud fonctionnalités comme http et fs.
La Photo est chargé par : CameraRoll Et la signature, j'extrais de notre principale application écrite en Ruby on Rails. Mais je pense que vous pourriez en mesure de recréer basé sur AWS documantations.

InformationsquelleAutor Michał Zubrzycki

5

multipart/form-data soutien pour Réagir Natif (via XHR FormData API) pour les charges utiles (JS chaînes de l'image + charges) est en travaux. Il devrait atterrir dans GitHub bientôt.
- aaaand il a atterri: github.com/facebook/react-native/commit/...
- Génial!! Je vois que vous aussi changer quelque chose dans la méthode de l'appel d'extraction? Il a cessé de travailler ou d'erreur s'affiche: Undiefiened n'est pas une fonction(évaluation RCTDataMenager.donneesrequete('http', { methode: la méthode, url: l'url des, données: les données, les en-têtes: les en-têtes }). Une chance sur conseil rapide ce qui a changé?
- Tant pis, j'ai eu deux versions de réagir indigènes et il n'aimait pas les uns les autres dans ce dossier...
InformationsquelleAutor Philipp von Weitershausen

@Michał Zubrzycki Merci, votre code de téléchargement d'image a fonctionné pour moi avec peu de changements.

const photo = {
uri: user.profilePicture,
type: "image/jpeg",
name: "photo.jpg"
};
const form = new FormData();
form.append("ProfilePicture", photo);
fetch(Constants.API_USER + "me/profilePicture", {
body: form,
method: "PUT",
headers: {
"Content-Type": "multipart/form-data",
Authorization: "Bearer " + user.token
}
})
.then(response => response.json())
.catch(error => {
console.log("ERROR ", error);
})
.then(responseData => {
console.log("Success", responseData);
})
.done();

InformationsquelleAutor Pir Shukarullah Shah

S3 options:

//this.state.s3options in YourComponent
{
"url": "https://yourapp.s3.eu-central-1.amazonaws.com",
"fields": {
"key": "cache/22d65141b48c5c44eaf93a0f6b0abc30.jpeg",
"policy": "eyJleHBpcm...1VDE0Mzc1OVoifV19",
"x-amz-credential": "AK...25/eu-central-1/s3/aws4_request",
"x-amz-algorithm": "AWS4-HMAC-SHA256",
"x-amz-date": "20161125T143759Z",
"x-amz-signature": "87863c360...b9b304bfe650"
}
}

Composant:

class YourComponent extends Component {
//...
//fileSource looks like: {uri: "content://media/external/images/media/13", isStatic: true}
async uploadFileToS3(fileSource) {
try {
var formData = new FormData();
//Prepare the formData by the S3 options
Object.keys(this.state.s3options.fields).forEach((key) => {
formData.append(key, this.state.s3options.fields[key]);
});
formData.append('file', {
uri: fileSource.uri,
type: 'image/jpeg',
});
formData.append('Content-Type', 'image/jpeg')
var request = new XMLHttpRequest();
request.onload = function(e) {
if (e.target.status === 204) {
//Result in e.target.responseHeaders.Location
this.setState({avatarSourceRemote: {uri: e.target.responseHeaders.Location}})
}
}.bind(this)
request.open('POST', this.state.s3options.url, true);
request.setRequestHeader('Content-type', 'multipart/form-data');
request.send(formData);
} catch(error) {
console.error(error);
}
}
//Example display the uploaded image
render() {
if (this.state.avatarSourceRemote) {
return (
<Image source={this.state.avatarSourceRemote} style={{width: 100, height: 100}} />
);
} else {
return (
<Text>No Image</Text>
);
}
}
}

InformationsquelleAutor blackchestnut

Vous devez vous connecter pour publier un commentaire.