View App.styles.jxs
const styles = StyleSheet.create({ | |
uploadedImage: { | |
width: 400, | |
height: 400, | |
resizeMode: 'cover', | |
}, | |
body: { | |
backgroundColor: "#ffffff", | |
}, | |
sectionContainer: { |
View app.upload.jsx
const Upload = () => { | |
const [uploadUrl, setUploadUrl] = useState(false); | |
const uploadyContext = useContext(UploadyContext); | |
useItemFinishListener((item) => { | |
const response = JSON.parse(item.uploadResponse.data); | |
console.log(`item ${item.id} finished uploading, response was: `, response); | |
setUploadUrl(response.url); | |
}); |
View App.jsx
import React, { useState, useCallback, useContext } from "react"; | |
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Button, ImageBackground, Image } from "react-native"; | |
import DocumentPicker from "react-native-document-picker/index"; | |
import NativeUploady, { | |
UploadyContext, | |
useItemFinishListener, | |
useItemStartListener, | |
useItemErrorListener, |
View ItemPreviewWithCrop.jsx
import ReactCrop from "react-image-crop"; | |
import { withRequestPreSendUpdate, useItemFinalizeListener } from "@rpldy/uploady"; | |
import { PREVIEW_TYPES } from "@rpldy/upload-preview"; | |
import cropImage from "./image-crop-helper"; | |
const ItemPreviewWithCrop = withRequestPreSendUpdate(props => { | |
const { id, url, isFallback, type, updateRequest, requestData, previewMethods } = props; | |
const [finished, setFinished] = useState(false); | |
const [crop, setCrop] = useState(null); |
View UploadWithCrop.jsx
import Uploady from "@rpldy/uploady"; | |
import UploadButton from "@rpldy/upload-button"; | |
import UploadPreview from "@rpldy/upload-preview"; | |
export default function UploadWithCrop() { | |
const previewMethodsRef = useRef(); | |
return ( | |
<Uploady | |
destination={{ url: "[upload-url]" }} |
View UploadWithProgressPreview.jsx
import UploadButton from "@rpldy/upload-button"; | |
import UploadPreview from "@rpldy/upload-preview"; | |
import CustomImagePreview from "./CustomImagePreview"; | |
const UploadWithProgressPreview = () => { | |
const getPreviewProps = useCallback(item => ({ id: item.id }), []); | |
return ( | |
<> | |
<UploadButton>Upload Files</UploadButton> |
View CustomImagePreview.jsx
import styled from "styled-components" | |
import { useItemProgressListener } from "@rpldy/uploady"; | |
const PreviewImage = styled.img` | |
margin: 5px; | |
max-width: 200px; | |
height: auto; | |
transition: opacity 0.4s; | |
${({ completed }) => `opacity: ${completed / 100};`} |
View App.jsx
import Uploady from "@rpldy/uploady"; | |
import UploadWithProgressPreview from "./UploadWithProgressPreview"; | |
const App = > () { | |
return ( | |
<Uploady | |
destination={{ url: "[upload-url]" }} | |
> | |
<div className="App"> | |
<h1>Hello React Uploady</h1> |
View App.jsx
import Uploady from "@rpldy/uploady"; | |
const App = > () { | |
return ( | |
<Uploady | |
destination={{ url: "[upload-url]" }} | |
> | |
<div className="App"> | |
<h1>Hello React Uploady</h1> | |
<UploadWithProgressPreview /> |
View simple.jsx
import React from "react"; | |
import Uploady from "@rpldy/uploady"; | |
import UploadButton from "@rpldy/upload-button"; | |
const MyApp = () => ( | |
<Uploady destination={{url: "https://my-server.com/upload"}}> | |
<UploadButton/> | |
</Uploady> | |
); |
NewerOlder