Skip to content

Instantly share code, notes, and snippets.

@allpwrfulroot
Created June 8, 2017 01:51
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save allpwrfulroot/7539e58ad6a8258d78e8f4808f513cad to your computer and use it in GitHub Desktop.
Save allpwrfulroot/7539e58ad6a8258d78e8f4808f513cad to your computer and use it in GitHub Desktop.
Excerpt from screen with image selection, resize, and upload to grahpql
...
async uploadImageAsync(uri) {
let formData = new FormData();
formData.append("query", `
mutation CreateFile($input: CreateFileInput!) {
createFile(input: $input) {
changedFile {
id
name
blobMimeType
blobUrl
user {
id
}
}
}
}
`)
formData.append("variables", JSON.stringify({
"input": {
"name": `${moment.tz(this.state.start, this.state.timezone).format('YYYYMMDD')}_${this.state.thing.length === 3 ? this.state.thing[2] : this.state.thing[1]}_${this.state.attachments.edges.length}.png`,
"recordId": `${this.props.data.viewer.user.records.edges[0].node.id}`,
"userId": `${this.props.data.viewer.user.id}`,
"blobFieldName": "photo"
}
}))
formData.append('photo', {
uri,
name: `photo.jpg`,
type: `image/jpg`
})
let options = {
method: 'POST',
headers: {
// 'Authorization': `Bearer ${token}`,
'Content-Type': 'multipart/form-data'
},
body: formData
}
return fetch(`https://${config.uploadUrl}`, options)
}
resizeImageAsync(result) {
let cropData = {
offset: {
x: 0,
y: 0
},
size: {
width: result.width,
height: result.height
},
displaySize: {
width: 800,
height: 1200
},
resizeMode: 'cover'
}
ImageEditor.cropImage(result.uri, cropData,
(success) => {
console.log('edited uri?: ', success)
this.setState({ tempPhoto: success })
this.uploadImageAsync(success)
.then(response => {
console.log('response from uploadImageAsync: ', response)
this.props.data.refetch({
args: {
id: {
eq: this.props.navigation.state.params.record.id
}
}
})
})
.catch(error => console.log(error.message))
},
(err) => {console.log('edited err: ', err)}
)
}
getImage = async() => {
try {
this.setState({ isLoading: true })
let result = await ImagePicker.launchImageLibraryAsync({ allowsEditing: false })
console.log('result of ImagePicker: ', result)
if(!result.cancelled && result.fileSize < 90000) {
this.setState({ tempPhoto: result.uri })
this.uploadImageAsync(result.uri)
.then(response => {
console.log('response from uploadImageAsync: ', response)
this.props.data.refetch({
args: {
id: {
eq: this.props.navigation.state.params.record.id
}
}
})
})
} else if(!result.cancelled) {
this.resizeImageAsync(result)
} else {
this.setState({ isLoading: false })
}
} catch (error) {
Alert.alert('Error saving file', error.message)
}
}
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment