parisio
/
iao_team


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
							
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Uppy File Upload with Cloud Integrations, Camera, and Unsplash</title>
    <link href="https://releases.transloadit.com/uppy/v2.6.0/uppy.min.css" rel="stylesheet">
</head>
<body>

    <h2>Upload Files with Cloud Services, Audio, Camera, and Unsplash using Uppy</h2>
    <div id="drag-drop-area"></div>
    <span class="select-file-button">Open Uppy Popup</span>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://releases.transloadit.com/uppy/v2.6.0/uppy.min.js"></script>
    <script>
        const uppy = new Uppy.Core({
            restrictions: {
                maxNumberOfFiles: 1,
                allowedFileTypes: ['image/*', 'video/*']
            },
            autoProceed: false,
            allowMultipleUploadBatches: false
        })
        .use(Uppy.Dashboard, {
            inline: false,
            target: '#drag-drop-area',
            trigger: '.select-file-button',
            showProgressDetails: true,
            singleFileFullScreen: true,
            //note: 'Upload files from cloud, record video, edit images, and search Unsplash',
            doneButtonHandler: null,
            closeModalOnClickOutside: true,
            closeAfterFinish: true,
            showLinkToFileUploadResult: true,
            proudlyDisplayPoweredByUppy: false
        })
        /*.use(Uppy.Url, {
            target: Uppy.Dashboard,
            companionUrl: 'https://demo.morphme.io/uppy_demo'
        })
        .use(Uppy.Unsplash, {
            target: Uppy.Dashboard,
            companionUrl: 'https://demo.morphme.io/uppy_demo',
            clientId: 'YOUR_UNSPLASH_ACCESS_KEY' // Replace with Unsplash Access Key
        })
        .use(Uppy.GoogleDrive, {
            target: Uppy.Dashboard,
            companionUrl: 'https://demo.morphme.io/uppy_demo'  // Companion server URL
        })
        .use(Uppy.OneDrive, {
            target: Uppy.Dashboard,
            companionUrl: 'https://demo.morphme.io/uppy_demo'
        })
        .use(Uppy.Dropbox, {
            target: Uppy.Dashboard,
            companionUrl: 'https://demo.morphme.io/uppy_demo'
        })*/
        .use(Uppy.Webcam, {
            target: Uppy.Dashboard,
            modes: ['picture', 'video-audio']
        })
        /*.use(Uppy.Audio, {
            target: Uppy.Dashboard
        })*/
        
        .use(Uppy.ImageEditor, {
            target: Uppy.Dashboard,
            quality: 0.8,
            cropperOptions: {
                viewMode: 1,
                background: true
            }
        })
        
        .use(Uppy.XHRUpload, {
            endpoint: 'upload.php',  // PHP endpoint
            fieldName: 'file',
            formData: true,
            bundle: true,
            getResponseData (response) {
                console.log(response);
              var json = jQuery.parseJSON(response);
              console.log('status: '+json.status);
              console.log('path: '+json.path);
            }
        });

        uppy.on('file-added', (file) => {
            console.log('Added file', file);
            uppy.setMeta({
                id: 110, 
                entity: 'Entity123',
                name: file.meta.name,
                type: file.meta.type
            });
        });

        uppy.on('upload-success', (file, response) => {
            console.log(file.name);
            console.log(response)
            /*const img = new Image();
            img.width = 300;
            img.alt = file.id;
            img.src = response.uploadURL;
            document.body.appendChild(img);*/
        });

        uppy.on('complete', (result) => {
            console.log('Upload complete! Files:', result.successful);
            /*if (result.successful.length > 0) {
                const fileUrl = result.successful[0].uploadURL;
                console.log('File uploaded:', fileUrl);
            }*/
        });

        uppy.on('dashboard:modal-closed', () => {
            console.log('Dashboard modal closed');
            uppy.cancelAll(); 
        });
    </script>

</body>
</html>