[{"transcript":" drag and drop is an intuitive way to upload files from your computer so let's","confidence":0.7756,"words":[{"word":"drag","start_time":0.121,"end_time":0.362},{"word":"and","start_time":0.382,"end_time":0.482},{"word":"drop","start_time":0.502,"end_time":0.784},{"word":"is","start_time":0.844,"end_time":0.925},{"word":"an","start_time":0.965,"end_time":1.025},{"word":"intuitive","start_time":1.085,"end_time":1.588},{"word":"way","start_time":1.648,"end_time":1.829},{"word":"to","start_time":1.869,"end_time":1.99},{"word":"upload","start_time":2.05,"end_time":2.331},{"word":"files","start_time":2.392,"end_time":2.713},{"word":"from","start_time":2.754,"end_time":2.914},{"word":"your","start_time":2.955,"end_time":3.095},{"word":"computer","start_time":3.156,"end_time":3.698},{"word":"so","start_time":3.799,"end_time":3.879},{"word":"let's","start_time":3.939,"end_time":4.06}],"alternatives":[],"language":"en"},{"transcript":" see how we can easily implement this into our react application with react drop zone","confidence":0.8097333333333334,"words":[{"word":"see","start_time":4.12,"end_time":4.301},{"word":"how","start_time":4.341,"end_time":4.502},{"word":"we","start_time":4.542,"end_time":4.643},{"word":"can","start_time":4.663,"end_time":4.823},{"word":"easily","start_time":4.884,"end_time":5.185},{"word":"implement","start_time":5.225,"end_time":5.667},{"word":"this","start_time":5.728,"end_time":5.928},{"word":"into","start_time":6.009,"end_time":6.19},{"word":"our","start_time":6.23,"end_time":6.33},{"word":"react","start_time":6.37,"end_time":6.672},{"word":"application","start_time":6.732,"end_time":7.355},{"word":"with","start_time":7.475,"end_time":7.636},{"word":"react","start_time":7.737,"end_time":8.098},{"word":"drop","start_time":8.138,"end_time":8.359},{"word":"zone","start_time":8.4,"end_time":8.48}],"alternatives":[],"language":"en"},{"transcript":" the traditional way to select files in websites is using the file picker input so for example in","confidence":0.7470555555555555,"words":[{"word":"the","start_time":12.882,"end_time":12.962},{"word":"traditional","start_time":12.982,"end_time":13.464},{"word":"way","start_time":13.504,"end_time":13.704},{"word":"to","start_time":13.745,"end_time":13.865},{"word":"select","start_time":13.905,"end_time":14.226},{"word":"files","start_time":14.306,"end_time":14.708},{"word":"in","start_time":14.768,"end_time":14.848},{"word":"websites","start_time":14.888,"end_time":15.51},{"word":"is","start_time":15.651,"end_time":15.751},{"word":"using","start_time":15.871,"end_time":16.152},{"word":"the","start_time":16.212,"end_time":16.333},{"word":"file","start_time":16.413,"end_time":16.714},{"word":"picker","start_time":16.834,"end_time":17.276},{"word":"input","start_time":17.416,"end_time":17.838},{"word":"so","start_time":17.998,"end_time":18.118},{"word":"for","start_time":18.138,"end_time":18.259},{"word":"example","start_time":18.299,"end_time":18.56},{"word":"in","start_time":18.58,"end_time":18.62}],"alternatives":[],"language":"en"},{"transcript":" my application i have this input to the type of file so this is the file input and when you","confidence":0.7201,"words":[{"word":"my","start_time":18.7,"end_time":18.781},{"word":"application","start_time":18.801,"end_time":19.303},{"word":"i","start_time":19.343,"end_time":19.404},{"word":"have","start_time":19.444,"end_time":19.585},{"word":"this","start_time":19.625,"end_time":19.785},{"word":"input","start_time":19.846,"end_time":20.087},{"word":"to","start_time":20.107,"end_time":20.187},{"word":"the","start_time":20.207,"end_time":20.288},{"word":"type","start_time":20.308,"end_time":20.509},{"word":"of","start_time":20.569,"end_time":20.67},{"word":"file","start_time":20.71,"end_time":21.011},{"word":"so","start_time":21.072,"end_time":21.273},{"word":"this","start_time":21.333,"end_time":21.473},{"word":"is","start_time":21.534,"end_time":21.594},{"word":"the","start_time":21.614,"end_time":21.715},{"word":"file","start_time":21.755,"end_time":21.996},{"word":"input","start_time":22.076,"end_time":22.458},{"word":"and","start_time":22.559,"end_time":22.659},{"word":"when","start_time":22.699,"end_time":22.78},{"word":"you","start_time":22.8,"end_time":22.86}],"alternatives":[],"language":"en"},{"transcript":" click on it you can navigate through your device to select a file and then you can press open","confidence":0.8197894736842105,"words":[{"word":"click","start_time":23.021,"end_time":23.261},{"word":"on","start_time":23.321,"end_time":23.402},{"word":"it","start_time":23.502,"end_time":23.602},{"word":"you","start_time":23.763,"end_time":23.863},{"word":"can","start_time":23.903,"end_time":24.084},{"word":"navigate","start_time":24.124,"end_time":24.626},{"word":"through","start_time":24.706,"end_time":25.047},{"word":"your","start_time":25.127,"end_time":25.428},{"word":"device","start_time":25.629,"end_time":26.13},{"word":"to","start_time":26.17,"end_time":26.371},{"word":"select","start_time":26.491,"end_time":26.953},{"word":"a","start_time":27.234,"end_time":27.274},{"word":"file","start_time":27.374,"end_time":27.695},{"word":"and","start_time":27.836,"end_time":27.936},{"word":"then","start_time":27.996,"end_time":28.177},{"word":"you","start_time":28.217,"end_time":28.337},{"word":"can","start_time":28.377,"end_time":28.538},{"word":"press","start_time":28.618,"end_time":28.939},{"word":"open","start_time":29.1,"end_time":29.18}],"alternatives":[],"language":"en"},{"transcript":" Now, while this works, often you have a file readily available where instead of navigating","confidence":0.8275333333333332,"words":[{"word":"Now,","start_time":29.63,"end_time":29.751},{"word":"while","start_time":29.791,"end_time":29.992},{"word":"this","start_time":30.032,"end_time":30.213},{"word":"works,","start_time":30.273,"end_time":30.635},{"word":"often","start_time":30.856,"end_time":31.177},{"word":"you","start_time":31.217,"end_time":31.338},{"word":"have","start_time":31.378,"end_time":31.579},{"word":"a","start_time":31.639,"end_time":31.679},{"word":"file","start_time":31.759,"end_time":32.02},{"word":"readily","start_time":32.081,"end_time":32.442},{"word":"available","start_time":32.543,"end_time":33.085},{"word":"where","start_time":33.205,"end_time":33.426},{"word":"instead","start_time":33.527,"end_time":33.828},{"word":"of","start_time":33.868,"end_time":33.929},{"word":"navigating","start_time":33.949,"end_time":34.27}],"alternatives":[],"language":"en"},{"transcript":" through your file system, you have the file you want and you can easily drag it and drop it into","confidence":0.68205,"words":[{"word":"through","start_time":34.772,"end_time":35.033},{"word":"your","start_time":35.093,"end_time":35.234},{"word":"file","start_time":35.314,"end_time":35.535},{"word":"system,","start_time":35.555,"end_time":36.077},{"word":"you","start_time":36.137,"end_time":36.257},{"word":"have","start_time":36.278,"end_time":36.418},{"word":"the","start_time":36.458,"end_time":36.559},{"word":"file","start_time":36.619,"end_time":36.86},{"word":"you","start_time":36.88,"end_time":37.0},{"word":"want","start_time":37.06,"end_time":37.321},{"word":"and","start_time":37.382,"end_time":37.442},{"word":"you","start_time":37.482,"end_time":37.542},{"word":"can","start_time":37.582,"end_time":37.743},{"word":"easily","start_time":37.783,"end_time":38.104},{"word":"drag","start_time":38.205,"end_time":38.526},{"word":"it","start_time":38.606,"end_time":38.667},{"word":"and","start_time":38.827,"end_time":38.928},{"word":"drop","start_time":39.008,"end_time":39.249},{"word":"it","start_time":39.269,"end_time":39.309},{"word":"into","start_time":39.349,"end_time":39.429}],"alternatives":[],"language":"en"},{"transcript":" the web application.","confidence":0.8896666666666667,"words":[{"word":"the","start_time":39.751,"end_time":39.851},{"word":"web","start_time":39.891,"end_time":40.112},{"word":"application.","start_time":40.173,"end_time":40.775}],"alternatives":[],"language":"en"},{"transcript":"To achieve something like this, you can use the browser's drag and drop API","confidence":0.7460714285714286,"words":[{"word":"To","start_time":40.916,"end_time":40.976},{"word":"achieve","start_time":40.996,"end_time":41.257},{"word":"something","start_time":41.298,"end_time":41.619},{"word":"like","start_time":41.659,"end_time":41.82},{"word":"this,","start_time":41.86,"end_time":42.021},{"word":"you","start_time":42.061,"end_time":42.162},{"word":"can","start_time":42.182,"end_time":42.322},{"word":"use","start_time":42.443,"end_time":42.563},{"word":"the","start_time":42.604,"end_time":42.684},{"word":"browser's","start_time":42.724,"end_time":43.206},{"word":"drag","start_time":43.246,"end_time":43.508},{"word":"and","start_time":43.588,"end_time":43.668},{"word":"drop","start_time":43.708,"end_time":43.909},{"word":"API","start_time":43.99,"end_time":44.05}],"alternatives":[],"language":"en"},{"transcript":" to handle drag and drop interactions.","confidence":0.8889999999999999,"words":[{"word":"to","start_time":44.532,"end_time":44.632},{"word":"handle","start_time":44.672,"end_time":45.134},{"word":"drag","start_time":45.174,"end_time":45.435},{"word":"and","start_time":45.535,"end_time":45.615},{"word":"drop","start_time":45.675,"end_time":45.936},{"word":"interactions.","start_time":46.017,"end_time":46.719}],"alternatives":[],"language":"en"},{"transcript":"But there are some libraries like React Drop Zone that makes","confidence":0.7830000000000001,"words":[{"word":"But","start_time":46.859,"end_time":47.0},{"word":"there","start_time":47.04,"end_time":47.201},{"word":"are","start_time":47.241,"end_time":47.341},{"word":"some","start_time":47.381,"end_time":47.562},{"word":"libraries","start_time":47.622,"end_time":48.164},{"word":"like","start_time":48.264,"end_time":48.465},{"word":"React","start_time":48.625,"end_time":48.987},{"word":"Drop","start_time":49.107,"end_time":49.348},{"word":"Zone","start_time":49.388,"end_time":49.629},{"word":"that","start_time":49.689,"end_time":49.849},{"word":"makes","start_time":49.91,"end_time":50.01}],"alternatives":[],"language":"en"},{"transcript":" it so much easier to implement such interactions.","confidence":0.8421249999999999,"words":[{"word":"it","start_time":50.231,"end_time":50.351},{"word":"so","start_time":50.532,"end_time":50.753},{"word":"much","start_time":50.833,"end_time":51.054},{"word":"easier","start_time":51.194,"end_time":51.536},{"word":"to","start_time":51.656,"end_time":51.817},{"word":"implement","start_time":51.937,"end_time":52.479},{"word":"such","start_time":52.64,"end_time":52.881},{"word":"interactions.","start_time":52.961,"end_time":53.644}],"alternatives":[],"language":"en"},{"transcript":"And that is what we're going to be using in this","confidence":0.6386363636363637,"words":[{"word":"And","start_time":53.704,"end_time":53.804},{"word":"that","start_time":53.844,"end_time":53.965},{"word":"is","start_time":54.025,"end_time":54.065},{"word":"what","start_time":54.105,"end_time":54.206},{"word":"we're","start_time":54.246,"end_time":54.346},{"word":"going","start_time":54.366,"end_time":54.507},{"word":"to","start_time":54.527,"end_time":54.607},{"word":"be","start_time":54.647,"end_time":54.728},{"word":"using","start_time":54.848,"end_time":55.069},{"word":"in","start_time":55.089,"end_time":55.129},{"word":"this","start_time":55.149,"end_time":55.249}],"alternatives":[],"language":"en"},{"transcript":" Install React drop zone.","confidence":0.7315,"words":[{"word":"Install","start_time":58.911,"end_time":59.636},{"word":"React","start_time":59.898,"end_time":60.523},{"word":"drop","start_time":60.805,"end_time":61.208},{"word":"zone.","start_time":61.369,"end_time":61.47}],"alternatives":[],"language":"en"},{"transcript":" When you have the package installed, then you can import useDropZone from ReactDropZone.","confidence":0.855076923076923,"words":[{"word":"When","start_time":62.361,"end_time":62.462},{"word":"you","start_time":62.502,"end_time":62.582},{"word":"have","start_time":62.602,"end_time":62.723},{"word":"the","start_time":62.743,"end_time":62.843},{"word":"package","start_time":62.883,"end_time":63.205},{"word":"installed,","start_time":63.265,"end_time":63.787},{"word":"then","start_time":63.868,"end_time":64.008},{"word":"you","start_time":64.028,"end_time":64.149},{"word":"can","start_time":64.169,"end_time":64.35},{"word":"import","start_time":64.45,"end_time":64.892},{"word":"useDropZone","start_time":65.113,"end_time":65.816},{"word":"from","start_time":65.876,"end_time":66.037},{"word":"ReactDropZone.","start_time":66.117,"end_time":66.76}],"alternatives":[],"language":"en"},{"transcript":" And let's see a simple example of the useDropZone in you.","confidence":0.5919090909090909,"words":[{"word":"And","start_time":67.061,"end_time":67.121},{"word":"let's","start_time":67.141,"end_time":67.302},{"word":"see","start_time":67.323,"end_time":67.423},{"word":"a","start_time":67.443,"end_time":67.463},{"word":"simple","start_time":67.504,"end_time":67.805},{"word":"example","start_time":67.866,"end_time":68.469},{"word":"of","start_time":68.731,"end_time":68.832},{"word":"the","start_time":68.993,"end_time":69.113},{"word":"useDropZone","start_time":69.254,"end_time":70.019},{"word":"in","start_time":70.039,"end_time":70.119},{"word":"you.","start_time":70.139,"end_time":70.24}],"alternatives":[],"language":"en"},{"transcript":" So here I use useDropZone and I pass the onDrop callback function.","confidence":0.7344166666666666,"words":[{"word":"So","start_time":70.561,"end_time":70.762},{"word":"here","start_time":70.883,"end_time":71.124},{"word":"I","start_time":71.184,"end_time":71.244},{"word":"use","start_time":71.425,"end_time":71.626},{"word":"useDropZone","start_time":71.767,"end_time":72.471},{"word":"and","start_time":72.511,"end_time":72.612},{"word":"I","start_time":72.632,"end_time":72.692},{"word":"pass","start_time":72.772,"end_time":73.034},{"word":"the","start_time":73.054,"end_time":73.175},{"word":"onDrop","start_time":73.275,"end_time":73.637},{"word":"callback","start_time":73.657,"end_time":73.999},{"word":"function.","start_time":74.019,"end_time":74.18}],"alternatives":[],"language":"en"},{"transcript":" This is the callback function and I'm not doing anything here yet.","confidence":0.8106666666666666,"words":[{"word":"This","start_time":74.561,"end_time":74.681},{"word":"is","start_time":74.722,"end_time":74.802},{"word":"the","start_time":74.822,"end_time":74.903},{"word":"callback","start_time":74.943,"end_time":75.325},{"word":"function","start_time":75.365,"end_time":75.868},{"word":"and","start_time":76.069,"end_time":76.19},{"word":"I'm","start_time":76.291,"end_time":76.411},{"word":"not","start_time":76.452,"end_time":76.552},{"word":"doing","start_time":76.592,"end_time":76.753},{"word":"anything","start_time":76.834,"end_time":77.176},{"word":"here","start_time":77.276,"end_time":77.578},{"word":"yet.","start_time":77.598,"end_time":77.86}],"alternatives":[],"language":"en"},{"transcript":" Then I destructure some properties and methods from the return values.","confidence":0.769,"words":[{"word":"Then","start_time":78.301,"end_time":78.442},{"word":"I","start_time":78.502,"end_time":78.583},{"word":"destructure","start_time":78.603,"end_time":79.186},{"word":"some","start_time":79.206,"end_time":79.387},{"word":"properties","start_time":79.448,"end_time":80.051},{"word":"and","start_time":80.171,"end_time":80.252},{"word":"methods","start_time":80.312,"end_time":80.734},{"word":"from","start_time":80.775,"end_time":80.936},{"word":"the","start_time":80.956,"end_time":81.117},{"word":"return","start_time":81.177,"end_time":81.539},{"word":"values.","start_time":81.559,"end_time":81.76}],"alternatives":[],"language":"en"},{"transcript":" Down here I have this div where I spread the root props.","confidence":0.6886666666666668,"words":[{"word":"Down","start_time":82.161,"end_time":82.342},{"word":"here","start_time":82.382,"end_time":82.583},{"word":"I","start_time":82.603,"end_time":82.623},{"word":"have","start_time":82.643,"end_time":82.864},{"word":"this","start_time":82.884,"end_time":83.106},{"word":"div","start_time":83.166,"end_time":83.528},{"word":"where","start_time":83.648,"end_time":83.99},{"word":"I","start_time":84.191,"end_time":84.272},{"word":"spread","start_time":84.352,"end_time":84.855},{"word":"the","start_time":85.056,"end_time":85.297},{"word":"root","start_time":85.438,"end_time":85.719},{"word":"props.","start_time":85.799,"end_time":85.9}],"alternatives":[],"language":"en"},{"transcript":" And then I have this input where I spread the input props.","confidence":0.8510000000000001,"words":[{"word":"And","start_time":86.241,"end_time":86.301},{"word":"then","start_time":86.341,"end_time":86.462},{"word":"I","start_time":86.502,"end_time":86.543},{"word":"have","start_time":86.603,"end_time":86.784},{"word":"this","start_time":86.825,"end_time":87.026},{"word":"input","start_time":87.147,"end_time":87.529},{"word":"where","start_time":87.589,"end_time":87.771},{"word":"I","start_time":87.851,"end_time":87.911},{"word":"spread","start_time":87.972,"end_time":88.354},{"word":"the","start_time":88.455,"end_time":88.556},{"word":"input","start_time":88.676,"end_time":89.059},{"word":"props.","start_time":89.079,"end_time":89.24}],"alternatives":[],"language":"en"},{"transcript":" of all the selected files.","confidence":0.752,"words":[{"word":"of","start_time":91.844,"end_time":91.905},{"word":"all","start_time":92.026,"end_time":92.168},{"word":"the","start_time":92.209,"end_time":92.331},{"word":"selected","start_time":92.351,"end_time":92.818},{"word":"files.","start_time":92.838,"end_time":92.94}],"alternatives":[],"language":"en"},{"transcript":" Let's say we are only interested in the first selected file and then I console log it.","confidence":0.6776470588235293,"words":[{"word":"Let's","start_time":93.321,"end_time":93.482},{"word":"say","start_time":93.502,"end_time":93.663},{"word":"we","start_time":93.683,"end_time":93.763},{"word":"are","start_time":93.783,"end_time":93.843},{"word":"only","start_time":93.884,"end_time":94.084},{"word":"interested","start_time":94.125,"end_time":94.747},{"word":"in","start_time":94.908,"end_time":95.009},{"word":"the","start_time":95.049,"end_time":95.129},{"word":"first","start_time":95.209,"end_time":95.491},{"word":"selected","start_time":95.571,"end_time":96.073},{"word":"file","start_time":96.133,"end_time":96.435},{"word":"and","start_time":96.495,"end_time":96.575},{"word":"then","start_time":96.616,"end_time":96.736},{"word":"I","start_time":96.796,"end_time":96.897},{"word":"console","start_time":96.977,"end_time":97.339},{"word":"log","start_time":97.359,"end_time":97.56},{"word":"it.","start_time":97.58,"end_time":97.62}],"alternatives":[],"language":"en"},{"transcript":" So I have this image.","confidence":0.7506,"words":[{"word":"So","start_time":97.943,"end_time":98.065},{"word":"I","start_time":98.126,"end_time":98.187},{"word":"have","start_time":98.228,"end_time":98.452},{"word":"this","start_time":98.513,"end_time":98.716},{"word":"image.","start_time":98.737,"end_time":98.94}],"alternatives":[],"language":"en"},{"transcript":" drag it here you can see i now have the selected file here but then let's do more with this example","confidence":0.8032857142857145,"words":[{"word":"drag","start_time":100.48,"end_time":100.781},{"word":"it","start_time":100.841,"end_time":100.962},{"word":"here","start_time":101.022,"end_time":101.243},{"word":"you","start_time":101.303,"end_time":101.403},{"word":"can","start_time":101.423,"end_time":101.624},{"word":"see","start_time":101.704,"end_time":101.925},{"word":"i","start_time":102.085,"end_time":102.165},{"word":"now","start_time":102.226,"end_time":102.406},{"word":"have","start_time":102.486,"end_time":102.727},{"word":"the","start_time":102.868,"end_time":103.028},{"word":"selected","start_time":103.209,"end_time":103.83},{"word":"file","start_time":104.151,"end_time":104.513},{"word":"here","start_time":104.653,"end_time":104.874},{"word":"but","start_time":104.954,"end_time":105.074},{"word":"then","start_time":105.094,"end_time":105.315},{"word":"let's","start_time":105.455,"end_time":105.696},{"word":"do","start_time":105.756,"end_time":105.917},{"word":"more","start_time":105.977,"end_time":106.158},{"word":"with","start_time":106.258,"end_time":106.398},{"word":"this","start_time":106.478,"end_time":106.659},{"word":"example","start_time":106.799,"end_time":106.98}],"alternatives":[],"language":"en"},{"transcript":" so here i keep states for the data url and in this on drop callback function i can loop through all","confidence":0.7648095238095238,"words":[{"word":"so","start_time":107.502,"end_time":107.642},{"word":"here","start_time":107.682,"end_time":107.883},{"word":"i","start_time":107.943,"end_time":108.024},{"word":"keep","start_time":108.064,"end_time":108.264},{"word":"states","start_time":108.325,"end_time":108.646},{"word":"for","start_time":108.686,"end_time":108.806},{"word":"the","start_time":108.846,"end_time":108.947},{"word":"data","start_time":108.987,"end_time":109.368},{"word":"url","start_time":109.468,"end_time":110.03},{"word":"and","start_time":110.231,"end_time":110.352},{"word":"in","start_time":110.372,"end_time":110.432},{"word":"this","start_time":110.452,"end_time":110.612},{"word":"on","start_time":110.733,"end_time":110.813},{"word":"drop","start_time":110.833,"end_time":111.054},{"word":"callback","start_time":111.094,"end_time":111.475},{"word":"function","start_time":111.515,"end_time":111.917},{"word":"i","start_time":112.017,"end_time":112.077},{"word":"can","start_time":112.118,"end_time":112.298},{"word":"loop","start_time":112.358,"end_time":112.579},{"word":"through","start_time":112.619,"end_time":112.76},{"word":"all","start_time":112.78,"end_time":112.84}],"alternatives":[],"language":"en"},{"transcript":" the accepted files in our case it's just going to be one and using the file reader api i can","confidence":0.7576,"words":[{"word":"the","start_time":112.96,"end_time":113.041},{"word":"accepted","start_time":113.101,"end_time":113.583},{"word":"files","start_time":113.623,"end_time":113.944},{"word":"in","start_time":114.025,"end_time":114.085},{"word":"our","start_time":114.125,"end_time":114.225},{"word":"case","start_time":114.286,"end_time":114.507},{"word":"it's","start_time":114.547,"end_time":114.627},{"word":"just","start_time":114.667,"end_time":114.848},{"word":"going","start_time":114.888,"end_time":115.049},{"word":"to","start_time":115.089,"end_time":115.149},{"word":"be","start_time":115.189,"end_time":115.31},{"word":"one","start_time":115.49,"end_time":115.611},{"word":"and","start_time":115.772,"end_time":115.852},{"word":"using","start_time":115.952,"end_time":116.153},{"word":"the","start_time":116.193,"end_time":116.294},{"word":"file","start_time":116.354,"end_time":116.595},{"word":"reader","start_time":116.635,"end_time":116.936},{"word":"api","start_time":117.037,"end_time":117.338},{"word":"i","start_time":117.478,"end_time":117.619},{"word":"can","start_time":117.639,"end_time":117.8}],"alternatives":[],"language":"en"},{"transcript":" listen to the unload event and then i can set the data url state with the data url of the file","confidence":0.8363809523809523,"words":[{"word":"listen","start_time":118.04,"end_time":118.401},{"word":"to","start_time":118.462,"end_time":118.622},{"word":"the","start_time":118.682,"end_time":118.843},{"word":"unload","start_time":119.043,"end_time":119.505},{"word":"event","start_time":119.605,"end_time":119.986},{"word":"and","start_time":120.146,"end_time":120.247},{"word":"then","start_time":120.307,"end_time":120.528},{"word":"i","start_time":120.708,"end_time":120.788},{"word":"can","start_time":120.848,"end_time":121.069},{"word":"set","start_time":121.169,"end_time":121.45},{"word":"the","start_time":121.591,"end_time":121.771},{"word":"data","start_time":121.851,"end_time":122.253},{"word":"url","start_time":122.453,"end_time":122.774},{"word":"state","start_time":122.814,"end_time":123.135},{"word":"with","start_time":123.235,"end_time":123.356},{"word":"the","start_time":123.376,"end_time":123.436},{"word":"data","start_time":123.496,"end_time":123.857},{"word":"url","start_time":124.058,"end_time":124.399},{"word":"of","start_time":124.519,"end_time":124.599},{"word":"the","start_time":124.619,"end_time":124.72},{"word":"file","start_time":124.74,"end_time":124.86}],"alternatives":[],"language":"en"},{"transcript":" display a preview of the selected image.","confidence":0.8991428571428571,"words":[{"word":"display","start_time":130.262,"end_time":130.845},{"word":"a","start_time":130.925,"end_time":130.966},{"word":"preview","start_time":131.086,"end_time":131.629},{"word":"of","start_time":131.911,"end_time":132.011},{"word":"the","start_time":132.091,"end_time":132.252},{"word":"selected","start_time":132.293,"end_time":132.795},{"word":"image.","start_time":132.916,"end_time":133.217}],"alternatives":[],"language":"en"},{"transcript":"I have some","confidence":0.6596666666666667,"words":[{"word":"I","start_time":133.378,"end_time":133.418},{"word":"have","start_time":133.459,"end_time":133.619},{"word":"some","start_time":133.64,"end_time":133.72}],"alternatives":[],"language":"en"},{"transcript":" action buttons for uploading and cancelling which I'm going","confidence":0.5861111111111111,"words":[{"word":"action","start_time":133.962,"end_time":134.324},{"word":"buttons","start_time":134.365,"end_time":134.788},{"word":"for","start_time":134.828,"end_time":134.989},{"word":"uploading","start_time":135.07,"end_time":135.493},{"word":"and","start_time":135.553,"end_time":135.634},{"word":"cancelling","start_time":135.694,"end_time":136.117},{"word":"which","start_time":136.137,"end_time":136.258},{"word":"I'm","start_time":136.278,"end_time":136.339},{"word":"going","start_time":136.359,"end_time":136.48}],"alternatives":[],"language":"en"},{"transcript":" to come to in a second and then here I can check if the drag is","confidence":0.8145625000000003,"words":[{"word":"to","start_time":136.621,"end_time":136.701},{"word":"come","start_time":136.741,"end_time":136.922},{"word":"to","start_time":136.963,"end_time":137.144},{"word":"in","start_time":137.284,"end_time":137.345},{"word":"a","start_time":137.425,"end_time":137.465},{"word":"second","start_time":137.526,"end_time":137.928},{"word":"and","start_time":138.089,"end_time":138.169},{"word":"then","start_time":138.21,"end_time":138.33},{"word":"here","start_time":138.391,"end_time":138.692},{"word":"I","start_time":138.833,"end_time":138.894},{"word":"can","start_time":138.934,"end_time":139.095},{"word":"check","start_time":139.155,"end_time":139.396},{"word":"if","start_time":139.477,"end_time":139.557},{"word":"the","start_time":139.598,"end_time":139.698},{"word":"drag","start_time":139.738,"end_time":139.98},{"word":"is","start_time":140.0,"end_time":140.04}],"alternatives":[],"language":"en"},{"transcript":" active which means I'm currently dragging on the","confidence":0.5757500000000001,"words":[{"word":"active","start_time":140.302,"end_time":140.624},{"word":"which","start_time":140.664,"end_time":140.805},{"word":"means","start_time":140.866,"end_time":141.067},{"word":"I'm","start_time":141.087,"end_time":141.148},{"word":"currently","start_time":141.369,"end_time":141.893},{"word":"dragging","start_time":141.974,"end_time":142.437},{"word":"on","start_time":142.457,"end_time":142.497},{"word":"the","start_time":142.739,"end_time":142.799}],"alternatives":[],"language":"en"},{"transcript":" container or on the drop zone then I'm going to display this","confidence":0.7653333333333333,"words":[{"word":"container","start_time":143.041,"end_time":143.624},{"word":"or","start_time":143.805,"end_time":143.865},{"word":"on","start_time":144.026,"end_time":144.107},{"word":"the","start_time":144.147,"end_time":144.248},{"word":"drop","start_time":144.268,"end_time":144.529},{"word":"zone","start_time":144.569,"end_time":144.831},{"word":"then","start_time":144.972,"end_time":145.173},{"word":"I'm","start_time":145.233,"end_time":145.354},{"word":"going","start_time":145.374,"end_time":145.555},{"word":"to","start_time":145.595,"end_time":145.676},{"word":"display","start_time":145.716,"end_time":146.259},{"word":"this","start_time":146.279,"end_time":146.38}],"alternatives":[],"language":"en"},{"transcript":" SVG.","confidence":0.812,"words":[{"word":"SVG.","start_time":146.762,"end_time":147.205}],"alternatives":[],"language":"en"},{"transcript":"I will show you that in a second but if I am not","confidence":0.7716153846153847,"words":[{"word":"I","start_time":147.286,"end_time":147.326},{"word":"will","start_time":147.367,"end_time":147.487},{"word":"show","start_time":147.528,"end_time":147.689},{"word":"you","start_time":147.709,"end_time":147.81},{"word":"that","start_time":147.85,"end_time":148.031},{"word":"in","start_time":148.071,"end_time":148.132},{"word":"a","start_time":148.212,"end_time":148.253},{"word":"second","start_time":148.293,"end_time":148.696},{"word":"but","start_time":148.736,"end_time":148.857},{"word":"if","start_time":148.897,"end_time":148.958},{"word":"I","start_time":149.018,"end_time":149.058},{"word":"am","start_time":149.099,"end_time":149.179},{"word":"not","start_time":149.22,"end_time":149.28}],"alternatives":[],"language":"en"},{"transcript":" currently dragging I have this drop your files here or click","confidence":0.8070909090909091,"words":[{"word":"currently","start_time":149.562,"end_time":150.024},{"word":"dragging","start_time":150.084,"end_time":150.527},{"word":"I","start_time":150.688,"end_time":150.768},{"word":"have","start_time":150.808,"end_time":151.11},{"word":"this","start_time":151.251,"end_time":151.492},{"word":"drop","start_time":151.593,"end_time":151.814},{"word":"your","start_time":151.834,"end_time":151.975},{"word":"files","start_time":152.015,"end_time":152.317},{"word":"here","start_time":152.377,"end_time":152.598},{"word":"or","start_time":152.719,"end_time":152.799},{"word":"click","start_time":152.819,"end_time":152.92}],"alternatives":[],"language":"en"},{"transcript":" to browse.","confidence":0.89,"words":[{"word":"to","start_time":153.101,"end_time":153.222},{"word":"browse.","start_time":153.262,"end_time":153.504}],"alternatives":[],"language":"en"},{"transcript":"So currently I'm not dragging and I have this but","confidence":0.6592999999999999,"words":[{"word":"So","start_time":153.524,"end_time":153.585},{"word":"currently","start_time":153.625,"end_time":153.947},{"word":"I'm","start_time":153.968,"end_time":154.088},{"word":"not","start_time":154.129,"end_time":154.27},{"word":"dragging","start_time":154.29,"end_time":154.713},{"word":"and","start_time":154.773,"end_time":154.874},{"word":"I","start_time":154.894,"end_time":154.935},{"word":"have","start_time":154.975,"end_time":155.156},{"word":"this","start_time":155.237,"end_time":155.438},{"word":"but","start_time":155.458,"end_time":155.64}],"alternatives":[],"language":"en"},{"transcript":" then let's say I have this image I drag and then I come","confidence":0.6967692307692308,"words":[{"word":"then","start_time":155.74,"end_time":155.882},{"word":"let's","start_time":155.902,"end_time":156.063},{"word":"say","start_time":156.083,"end_time":156.184},{"word":"I","start_time":156.204,"end_time":156.224},{"word":"have","start_time":156.244,"end_time":156.426},{"word":"this","start_time":156.486,"end_time":156.648},{"word":"image","start_time":156.789,"end_time":157.071},{"word":"I","start_time":157.212,"end_time":157.293},{"word":"drag","start_time":157.353,"end_time":157.696},{"word":"and","start_time":157.776,"end_time":157.857},{"word":"then","start_time":157.877,"end_time":157.998},{"word":"I","start_time":158.059,"end_time":158.119},{"word":"come","start_time":158.139,"end_time":158.22}],"alternatives":[],"language":"en"},{"transcript":" see that as drag is active on the drop zone i can put that svg there but if it's not active","confidence":0.839095238095238,"words":[{"word":"see","start_time":159.091,"end_time":159.291},{"word":"that","start_time":159.332,"end_time":159.532},{"word":"as","start_time":159.693,"end_time":159.793},{"word":"drag","start_time":159.873,"end_time":160.215},{"word":"is","start_time":160.275,"end_time":160.355},{"word":"active","start_time":160.556,"end_time":160.977},{"word":"on","start_time":161.178,"end_time":161.258},{"word":"the","start_time":161.318,"end_time":161.479},{"word":"drop","start_time":161.64,"end_time":161.88},{"word":"zone","start_time":161.9,"end_time":162.161},{"word":"i","start_time":162.322,"end_time":162.362},{"word":"can","start_time":162.422,"end_time":162.603},{"word":"put","start_time":162.643,"end_time":162.824},{"word":"that","start_time":162.864,"end_time":163.024},{"word":"svg","start_time":163.185,"end_time":163.486},{"word":"there","start_time":163.566,"end_time":163.787},{"word":"but","start_time":163.827,"end_time":163.927},{"word":"if","start_time":163.968,"end_time":164.028},{"word":"it's","start_time":164.068,"end_time":164.188},{"word":"not","start_time":164.229,"end_time":164.349},{"word":"active","start_time":164.489,"end_time":164.65}],"alternatives":[],"language":"en"},{"transcript":" we don't have anything there and now i can drop this remember again that i'm able to","confidence":0.8017647058823528,"words":[{"word":"we","start_time":164.951,"end_time":165.031},{"word":"don't","start_time":165.052,"end_time":165.192},{"word":"have","start_time":165.232,"end_time":165.413},{"word":"anything","start_time":165.453,"end_time":165.814},{"word":"there","start_time":165.855,"end_time":166.095},{"word":"and","start_time":166.216,"end_time":166.316},{"word":"now","start_time":166.376,"end_time":166.597},{"word":"i","start_time":166.738,"end_time":166.798},{"word":"can","start_time":166.858,"end_time":167.059},{"word":"drop","start_time":167.099,"end_time":167.34},{"word":"this","start_time":167.4,"end_time":167.601},{"word":"remember","start_time":167.742,"end_time":168.163},{"word":"again","start_time":168.304,"end_time":168.645},{"word":"that","start_time":168.906,"end_time":169.147},{"word":"i'm","start_time":169.308,"end_time":169.468},{"word":"able","start_time":169.609,"end_time":169.789},{"word":"to","start_time":169.809,"end_time":169.85}],"alternatives":[],"language":"en"},{"transcript":" get the data url of the file and i can save the data url and then i can display","confidence":0.8095263157894736,"words":[{"word":"get","start_time":170.392,"end_time":170.632},{"word":"the","start_time":170.733,"end_time":170.853},{"word":"data","start_time":170.914,"end_time":171.275},{"word":"url","start_time":171.435,"end_time":171.676},{"word":"of","start_time":171.777,"end_time":171.857},{"word":"the","start_time":171.897,"end_time":171.998},{"word":"file","start_time":172.078,"end_time":172.379},{"word":"and","start_time":172.499,"end_time":172.6},{"word":"i","start_time":172.64,"end_time":172.7},{"word":"can","start_time":172.74,"end_time":172.921},{"word":"save","start_time":173.001,"end_time":173.222},{"word":"the","start_time":173.242,"end_time":173.322},{"word":"data","start_time":173.363,"end_time":173.704},{"word":"url","start_time":173.885,"end_time":174.226},{"word":"and","start_time":174.306,"end_time":174.386},{"word":"then","start_time":174.427,"end_time":174.587},{"word":"i","start_time":174.728,"end_time":174.788},{"word":"can","start_time":174.848,"end_time":175.049},{"word":"display","start_time":175.109,"end_time":175.35}],"alternatives":[],"language":"en"},{"transcript":" the data url on this image so here we have a preview i can cancel","confidence":0.7580666666666664,"words":[{"word":"the","start_time":175.39,"end_time":175.631},{"word":"data","start_time":175.671,"end_time":176.033},{"word":"url","start_time":176.174,"end_time":176.535},{"word":"on","start_time":176.656,"end_time":176.736},{"word":"this","start_time":176.796,"end_time":176.957},{"word":"image","start_time":177.057,"end_time":177.318},{"word":"so","start_time":177.459,"end_time":177.62},{"word":"here","start_time":177.68,"end_time":177.901},{"word":"we","start_time":177.941,"end_time":178.082},{"word":"have","start_time":178.122,"end_time":178.343},{"word":"a","start_time":178.463,"end_time":178.504},{"word":"preview","start_time":178.564,"end_time":179.006},{"word":"i","start_time":179.026,"end_time":179.046},{"word":"can","start_time":179.166,"end_time":179.307},{"word":"cancel","start_time":179.367,"end_time":179.649}],"alternatives":[],"language":"en"},{"transcript":" and drag another file here.","confidence":0.7144,"words":[{"word":"and","start_time":181.452,"end_time":181.572},{"word":"drag","start_time":181.793,"end_time":182.114},{"word":"another","start_time":182.194,"end_time":182.555},{"word":"file","start_time":182.636,"end_time":182.897},{"word":"here.","start_time":182.957,"end_time":183.198}],"alternatives":[],"language":"en"},{"transcript":"So now I have a simple drag and preview example with React Drop Zone.","confidence":0.8021428571428572,"words":[{"word":"So","start_time":183.338,"end_time":183.438},{"word":"now","start_time":183.479,"end_time":183.619},{"word":"I","start_time":183.639,"end_time":183.679},{"word":"have","start_time":183.719,"end_time":183.9},{"word":"a","start_time":183.94,"end_time":184.0},{"word":"simple","start_time":184.06,"end_time":184.482},{"word":"drag","start_time":184.502,"end_time":184.803},{"word":"and","start_time":184.843,"end_time":184.923},{"word":"preview","start_time":184.964,"end_time":185.305},{"word":"example","start_time":185.345,"end_time":185.766},{"word":"with","start_time":185.786,"end_time":185.927},{"word":"React","start_time":185.987,"end_time":186.288},{"word":"Drop","start_time":186.328,"end_time":186.549},{"word":"Zone.","start_time":186.569,"end_time":186.79}],"alternatives":[],"language":"en"},{"transcript":"But","confidence":0.0,"words":[{"word":"But","start_time":186.81,"end_time":186.87}],"alternatives":[],"language":"en"},{"transcript":" then if you need somewhere to upload this image, then you can use Cloudinary for that.","confidence":0.8963749999999999,"words":[{"word":"then","start_time":186.97,"end_time":187.111},{"word":"if","start_time":187.151,"end_time":187.211},{"word":"you","start_time":187.252,"end_time":187.352},{"word":"need","start_time":187.392,"end_time":187.593},{"word":"somewhere","start_time":187.653,"end_time":188.075},{"word":"to","start_time":188.135,"end_time":188.236},{"word":"upload","start_time":188.316,"end_time":188.637},{"word":"this","start_time":188.677,"end_time":188.858},{"word":"image,","start_time":189.019,"end_time":189.34},{"word":"then","start_time":189.521,"end_time":189.722},{"word":"you","start_time":189.762,"end_time":189.862},{"word":"can","start_time":189.902,"end_time":190.083},{"word":"use","start_time":190.204,"end_time":190.324},{"word":"Cloudinary","start_time":190.384,"end_time":190.967},{"word":"for","start_time":191.027,"end_time":191.148},{"word":"that.","start_time":191.188,"end_time":191.429}],"alternatives":[],"language":"en"},{"transcript":"There are","confidence":0.3735,"words":[{"word":"There","start_time":191.449,"end_time":191.65},{"word":"are","start_time":191.67,"end_time":191.73}],"alternatives":[],"language":"en"},{"transcript":" various ways you can go about this.","confidence":0.8735714285714286,"words":[{"word":"various","start_time":191.891,"end_time":192.292},{"word":"ways","start_time":192.352,"end_time":192.573},{"word":"you","start_time":192.593,"end_time":192.693},{"word":"can","start_time":192.734,"end_time":192.894},{"word":"go","start_time":192.954,"end_time":193.095},{"word":"about","start_time":193.175,"end_time":193.456},{"word":"this.","start_time":193.516,"end_time":193.737}],"alternatives":[],"language":"en"},{"transcript":"For example, you have the Node.js SDK.","confidence":0.865,"words":[{"word":"For","start_time":193.878,"end_time":193.978},{"word":"example,","start_time":194.058,"end_time":194.56},{"word":"you","start_time":194.68,"end_time":194.821},{"word":"have","start_time":194.861,"end_time":195.062},{"word":"the","start_time":195.102,"end_time":195.222},{"word":"Node.js","start_time":195.303,"end_time":195.825},{"word":"SDK.","start_time":196.025,"end_time":196.527}],"alternatives":[],"language":"en"},{"transcript":"So you have an API","confidence":0.8276,"words":[{"word":"So","start_time":196.627,"end_time":196.728},{"word":"you","start_time":196.748,"end_time":196.848},{"word":"have","start_time":196.888,"end_time":197.029},{"word":"an","start_time":197.069,"end_time":197.129},{"word":"API","start_time":197.23,"end_time":197.37}],"alternatives":[],"language":"en"},{"transcript":" endpoint which your front-end application sends the file to and you can use this to upload to","confidence":0.7880588235294116,"words":[{"word":"endpoint","start_time":197.711,"end_time":198.133},{"word":"which","start_time":198.193,"end_time":198.334},{"word":"your","start_time":198.374,"end_time":198.495},{"word":"front-end","start_time":198.535,"end_time":198.956},{"word":"application","start_time":199.017,"end_time":199.679},{"word":"sends","start_time":199.78,"end_time":200.021},{"word":"the","start_time":200.061,"end_time":200.181},{"word":"file","start_time":200.221,"end_time":200.503},{"word":"to","start_time":200.543,"end_time":200.764},{"word":"and","start_time":200.924,"end_time":201.005},{"word":"you","start_time":201.025,"end_time":201.125},{"word":"can","start_time":201.165,"end_time":201.306},{"word":"use","start_time":201.426,"end_time":201.567},{"word":"this","start_time":201.607,"end_time":201.788},{"word":"to","start_time":201.808,"end_time":201.908},{"word":"upload","start_time":201.969,"end_time":202.27},{"word":"to","start_time":202.29,"end_time":202.33}],"alternatives":[],"language":"en"},{"transcript":" Cloudinary.","confidence":0.783,"words":[{"word":"Cloudinary.","start_time":202.45,"end_time":202.993}],"alternatives":[],"language":"en"},{"transcript":"If you're using Next.js for example, you have the CLD upload widget which makes this","confidence":0.6773333333333332,"words":[{"word":"If","start_time":203.133,"end_time":203.214},{"word":"you're","start_time":203.254,"end_time":203.394},{"word":"using","start_time":203.475,"end_time":203.736},{"word":"Next.js","start_time":203.776,"end_time":204.258},{"word":"for","start_time":204.298,"end_time":204.418},{"word":"example,","start_time":204.479,"end_time":205.001},{"word":"you","start_time":205.041,"end_time":205.201},{"word":"have","start_time":205.242,"end_time":205.422},{"word":"the","start_time":205.463,"end_time":205.583},{"word":"CLD","start_time":205.623,"end_time":206.145},{"word":"upload","start_time":206.185,"end_time":206.507},{"word":"widget","start_time":206.547,"end_time":206.868},{"word":"which","start_time":206.908,"end_time":207.049},{"word":"makes","start_time":207.089,"end_time":207.23},{"word":"this","start_time":207.25,"end_time":207.33}],"alternatives":[],"language":"en"},{"transcript":" approach you can check out the video above a link will also be in the video description but for this","confidence":0.7752999999999999,"words":[{"word":"approach","start_time":210.911,"end_time":211.273},{"word":"you","start_time":211.293,"end_time":211.413},{"word":"can","start_time":211.433,"end_time":211.614},{"word":"check","start_time":211.634,"end_time":211.855},{"word":"out","start_time":211.915,"end_time":212.036},{"word":"the","start_time":212.076,"end_time":212.156},{"word":"video","start_time":212.217,"end_time":212.538},{"word":"above","start_time":212.658,"end_time":213.02},{"word":"a","start_time":213.18,"end_time":213.221},{"word":"link","start_time":213.261,"end_time":213.441},{"word":"will","start_time":213.482,"end_time":213.622},{"word":"also","start_time":213.642,"end_time":213.883},{"word":"be","start_time":213.923,"end_time":214.064},{"word":"in","start_time":214.084,"end_time":214.164},{"word":"the","start_time":214.184,"end_time":214.265},{"word":"video","start_time":214.305,"end_time":214.586},{"word":"description","start_time":214.626,"end_time":215.168},{"word":"but","start_time":215.249,"end_time":215.369},{"word":"for","start_time":215.409,"end_time":215.49},{"word":"this","start_time":215.51,"end_time":215.59}],"alternatives":[],"language":"en"},{"transcript":" tutorial we'll be using the cloudinary upload endpoint to use this endpoint you need your api","confidence":0.8121875000000001,"words":[{"word":"tutorial","start_time":215.71,"end_time":216.232},{"word":"we'll","start_time":216.252,"end_time":216.433},{"word":"be","start_time":216.453,"end_time":216.513},{"word":"using","start_time":216.614,"end_time":216.855},{"word":"the","start_time":216.875,"end_time":216.975},{"word":"cloudinary","start_time":217.015,"end_time":217.638},{"word":"upload","start_time":217.798,"end_time":218.28},{"word":"endpoint","start_time":218.461,"end_time":218.922},{"word":"to","start_time":219.103,"end_time":219.203},{"word":"use","start_time":219.324,"end_time":219.424},{"word":"this","start_time":219.464,"end_time":219.605},{"word":"endpoint","start_time":219.705,"end_time":220.167},{"word":"you","start_time":220.207,"end_time":220.287},{"word":"need","start_time":220.327,"end_time":220.488},{"word":"your","start_time":220.508,"end_time":220.629},{"word":"api","start_time":220.709,"end_time":220.93}],"alternatives":[],"language":"en"},{"transcript":" key which you can find on your cloudinary dashboard and then you can save it in a .env file in your","confidence":0.7855714285714286,"words":[{"word":"key","start_time":221.171,"end_time":221.371},{"word":"which","start_time":221.432,"end_time":221.572},{"word":"you","start_time":221.592,"end_time":221.692},{"word":"can","start_time":221.713,"end_time":221.873},{"word":"find","start_time":221.933,"end_time":222.114},{"word":"on","start_time":222.154,"end_time":222.194},{"word":"your","start_time":222.214,"end_time":222.335},{"word":"cloudinary","start_time":222.355,"end_time":222.857},{"word":"dashboard","start_time":222.877,"end_time":223.419},{"word":"and","start_time":223.499,"end_time":223.6},{"word":"then","start_time":223.62,"end_time":223.76},{"word":"you","start_time":223.78,"end_time":223.901},{"word":"can","start_time":223.941,"end_time":224.162},{"word":"save","start_time":224.222,"end_time":224.503},{"word":"it","start_time":224.543,"end_time":224.624},{"word":"in","start_time":224.744,"end_time":224.824},{"word":"a","start_time":225.125,"end_time":225.286},{"word":".env","start_time":225.467,"end_time":225.587},{"word":"file","start_time":225.688,"end_time":226.029},{"word":"in","start_time":226.169,"end_time":226.23},{"word":"your","start_time":226.25,"end_time":226.33}],"alternatives":[],"language":"en"},{"transcript":" react application also you need to define your upload presets i'll be registering this preset","confidence":0.7306666666666667,"words":[{"word":"react","start_time":226.551,"end_time":226.872},{"word":"application","start_time":226.932,"end_time":227.555},{"word":"also","start_time":227.776,"end_time":228.017},{"word":"you","start_time":228.037,"end_time":228.097},{"word":"need","start_time":228.137,"end_time":228.278},{"word":"to","start_time":228.298,"end_time":228.378},{"word":"define","start_time":228.418,"end_time":228.759},{"word":"your","start_time":228.78,"end_time":228.92},{"word":"upload","start_time":229.021,"end_time":229.342},{"word":"presets","start_time":229.402,"end_time":229.864},{"word":"i'll","start_time":230.004,"end_time":230.125},{"word":"be","start_time":230.145,"end_time":230.245},{"word":"registering","start_time":230.306,"end_time":230.908},{"word":"this","start_time":230.968,"end_time":231.149},{"word":"preset","start_time":231.249,"end_time":231.45}],"alternatives":[],"language":"en"},{"transcript":" as unsigned for testing purposes but you would need to use signed upload presets in production","confidence":0.7494999999999999,"words":[{"word":"as","start_time":231.832,"end_time":231.932},{"word":"unsigned","start_time":232.073,"end_time":232.534},{"word":"for","start_time":232.595,"end_time":232.735},{"word":"testing","start_time":232.796,"end_time":233.157},{"word":"purposes","start_time":233.197,"end_time":233.699},{"word":"but","start_time":233.78,"end_time":233.9},{"word":"you","start_time":233.94,"end_time":234.021},{"word":"would","start_time":234.041,"end_time":234.181},{"word":"need","start_time":234.221,"end_time":234.382},{"word":"to","start_time":234.422,"end_time":234.523},{"word":"use","start_time":234.663,"end_time":234.784},{"word":"signed","start_time":234.824,"end_time":235.085},{"word":"upload","start_time":235.145,"end_time":235.467},{"word":"presets","start_time":235.507,"end_time":235.928},{"word":"in","start_time":236.009,"end_time":236.069},{"word":"production","start_time":236.089,"end_time":236.31}],"alternatives":[],"language":"en"},{"transcript":" function.","confidence":0.888,"words":[{"word":"function.","start_time":240.071,"end_time":240.532}],"alternatives":[],"language":"en"},{"transcript":"I have my form data then I add the file.","confidence":0.8341,"words":[{"word":"I","start_time":240.632,"end_time":240.692},{"word":"have","start_time":240.733,"end_time":240.913},{"word":"my","start_time":240.953,"end_time":241.094},{"word":"form","start_time":241.154,"end_time":241.394},{"word":"data","start_time":241.414,"end_time":241.795},{"word":"then","start_time":242.036,"end_time":242.237},{"word":"I","start_time":242.417,"end_time":242.497},{"word":"add","start_time":242.638,"end_time":242.818},{"word":"the","start_time":242.899,"end_time":243.019},{"word":"file.","start_time":243.099,"end_time":243.5}],"alternatives":[],"language":"en"},{"transcript":"I also append the upload preset field and here I","confidence":0.7119000000000001,"words":[{"word":"I","start_time":243.641,"end_time":243.721},{"word":"also","start_time":243.841,"end_time":244.162},{"word":"append","start_time":244.322,"end_time":244.804},{"word":"the","start_time":244.964,"end_time":245.125},{"word":"upload","start_time":245.305,"end_time":245.726},{"word":"preset","start_time":245.847,"end_time":246.288},{"word":"field","start_time":246.348,"end_time":246.689},{"word":"and","start_time":246.809,"end_time":246.889},{"word":"here","start_time":246.95,"end_time":247.05},{"word":"I","start_time":247.07,"end_time":247.09}],"alternatives":[],"language":"en"},{"transcript":" have my unsigned preset and then you have the API key and here I am using the API key which I have","confidence":0.7773636363636364,"words":[{"word":"have","start_time":247.17,"end_time":247.351},{"word":"my","start_time":247.391,"end_time":247.531},{"word":"unsigned","start_time":247.612,"end_time":248.073},{"word":"preset","start_time":248.133,"end_time":248.555},{"word":"and","start_time":248.615,"end_time":248.695},{"word":"then","start_time":248.715,"end_time":248.836},{"word":"you","start_time":248.856,"end_time":248.976},{"word":"have","start_time":249.016,"end_time":249.217},{"word":"the","start_time":249.297,"end_time":249.438},{"word":"API","start_time":249.618,"end_time":249.899},{"word":"key","start_time":250.16,"end_time":250.461},{"word":"and","start_time":250.702,"end_time":250.822},{"word":"here","start_time":250.963,"end_time":251.264},{"word":"I","start_time":251.404,"end_time":251.464},{"word":"am","start_time":251.524,"end_time":251.605},{"word":"using","start_time":251.705,"end_time":251.966},{"word":"the","start_time":252.006,"end_time":252.086},{"word":"API","start_time":252.167,"end_time":252.407},{"word":"key","start_time":252.608,"end_time":252.768},{"word":"which","start_time":252.829,"end_time":252.969},{"word":"I","start_time":253.049,"end_time":253.11},{"word":"have","start_time":253.15,"end_time":253.23}],"alternatives":[],"language":"en"},{"transcript":" in my environment variable and then I can make a post request with the form data to the API on my","confidence":0.8168571428571428,"words":[{"word":"in","start_time":253.511,"end_time":253.591},{"word":"my","start_time":253.651,"end_time":253.852},{"word":"environment","start_time":253.972,"end_time":254.574},{"word":"variable","start_time":254.634,"end_time":255.075},{"word":"and","start_time":255.216,"end_time":255.296},{"word":"then","start_time":255.336,"end_time":255.516},{"word":"I","start_time":255.597,"end_time":255.657},{"word":"can","start_time":255.697,"end_time":255.877},{"word":"make","start_time":255.958,"end_time":256.178},{"word":"a","start_time":256.419,"end_time":256.479},{"word":"post","start_time":256.64,"end_time":256.9},{"word":"request","start_time":256.94,"end_time":257.422},{"word":"with","start_time":257.462,"end_time":257.602},{"word":"the","start_time":257.642,"end_time":257.723},{"word":"form","start_time":257.803,"end_time":258.064},{"word":"data","start_time":258.084,"end_time":258.505},{"word":"to","start_time":258.625,"end_time":258.866},{"word":"the","start_time":258.966,"end_time":259.086},{"word":"API","start_time":259.207,"end_time":259.828},{"word":"on","start_time":260.149,"end_time":260.27},{"word":"my","start_time":260.35,"end_time":260.39}],"alternatives":[],"language":"en"},{"transcript":" account name.","confidence":0.8685,"words":[{"word":"account","start_time":260.932,"end_time":261.373},{"word":"name.","start_time":261.453,"end_time":261.694}],"alternatives":[],"language":"en"},{"transcript":"I get the URL from the response so I can also update my uploaded URL state with that","confidence":0.7344444444444445,"words":[{"word":"I","start_time":261.874,"end_time":261.934},{"word":"get","start_time":261.974,"end_time":262.155},{"word":"the","start_time":262.175,"end_time":262.275},{"word":"URL","start_time":262.496,"end_time":262.777},{"word":"from","start_time":262.837,"end_time":263.017},{"word":"the","start_time":263.058,"end_time":263.158},{"word":"response","start_time":263.238,"end_time":263.719},{"word":"so","start_time":263.739,"end_time":263.88},{"word":"I","start_time":263.92,"end_time":263.96},{"word":"can","start_time":264.0,"end_time":264.181},{"word":"also","start_time":264.341,"end_time":264.722},{"word":"update","start_time":264.903,"end_time":265.304},{"word":"my","start_time":265.384,"end_time":265.565},{"word":"uploaded","start_time":265.745,"end_time":266.247},{"word":"URL","start_time":266.487,"end_time":266.808},{"word":"state","start_time":266.868,"end_time":267.209},{"word":"with","start_time":267.249,"end_time":267.33},{"word":"that","start_time":267.35,"end_time":267.43}],"alternatives":[],"language":"en"},{"transcript":" a state for this here uploaded URL and when I get the uploaded URL down here I","confidence":0.8179411764705883,"words":[{"word":"a","start_time":269.06,"end_time":269.221},{"word":"state","start_time":269.462,"end_time":269.843},{"word":"for","start_time":270.003,"end_time":270.144},{"word":"this","start_time":270.204,"end_time":270.485},{"word":"here","start_time":270.645,"end_time":270.926},{"word":"uploaded","start_time":271.107,"end_time":271.589},{"word":"URL","start_time":271.749,"end_time":272.07},{"word":"and","start_time":272.17,"end_time":272.271},{"word":"when","start_time":272.291,"end_time":272.411},{"word":"I","start_time":272.471,"end_time":272.552},{"word":"get","start_time":272.592,"end_time":272.752},{"word":"the","start_time":272.793,"end_time":272.913},{"word":"uploaded","start_time":273.033,"end_time":273.475},{"word":"URL","start_time":273.696,"end_time":274.077},{"word":"down","start_time":274.318,"end_time":274.558},{"word":"here","start_time":274.639,"end_time":274.879},{"word":"I","start_time":274.9,"end_time":274.92}],"alternatives":[],"language":"en"},{"transcript":" can also display that I have the image I drag","confidence":0.8131,"words":[{"word":"can","start_time":275.221,"end_time":275.422},{"word":"also","start_time":275.603,"end_time":275.945},{"word":"display","start_time":276.127,"end_time":276.609},{"word":"that","start_time":276.79,"end_time":277.012},{"word":"I","start_time":277.233,"end_time":277.293},{"word":"have","start_time":277.334,"end_time":277.515},{"word":"the","start_time":277.555,"end_time":277.656},{"word":"image","start_time":277.776,"end_time":278.078},{"word":"I","start_time":278.179,"end_time":278.259},{"word":"drag","start_time":278.3,"end_time":278.38}],"alternatives":[],"language":"en"},{"transcript":" I come here and I drop then I can either cancel or I can upload when I upload this gets uploaded","confidence":0.6881428571428571,"words":[{"word":"I","start_time":278.991,"end_time":279.071},{"word":"come","start_time":279.131,"end_time":279.332},{"word":"here","start_time":279.392,"end_time":279.713},{"word":"and","start_time":279.934,"end_time":280.034},{"word":"I","start_time":280.054,"end_time":280.074},{"word":"drop","start_time":280.375,"end_time":280.656},{"word":"then","start_time":280.757,"end_time":280.877},{"word":"I","start_time":280.917,"end_time":280.977},{"word":"can","start_time":281.018,"end_time":281.138},{"word":"either","start_time":281.198,"end_time":281.419},{"word":"cancel","start_time":281.459,"end_time":281.941},{"word":"or","start_time":282.202,"end_time":282.322},{"word":"I","start_time":282.483,"end_time":282.563},{"word":"can","start_time":282.623,"end_time":282.844},{"word":"upload","start_time":282.984,"end_time":283.346},{"word":"when","start_time":283.406,"end_time":283.526},{"word":"I","start_time":283.586,"end_time":283.687},{"word":"upload","start_time":283.707,"end_time":284.008},{"word":"this","start_time":284.028,"end_time":284.209},{"word":"gets","start_time":284.229,"end_time":284.429},{"word":"uploaded","start_time":284.449,"end_time":284.61}],"alternatives":[],"language":"en"},{"transcript":" to Cloudinary and now I have the public URL for the image here and this is the image hosted on","confidence":0.8150000000000001,"words":[{"word":"to","start_time":284.851,"end_time":284.951},{"word":"Cloudinary","start_time":284.971,"end_time":285.553},{"word":"and","start_time":285.673,"end_time":285.754},{"word":"now","start_time":285.794,"end_time":285.974},{"word":"I","start_time":286.115,"end_time":286.195},{"word":"have","start_time":286.235,"end_time":286.476},{"word":"the","start_time":286.617,"end_time":286.777},{"word":"public","start_time":286.918,"end_time":287.279},{"word":"URL","start_time":287.439,"end_time":287.68},{"word":"for","start_time":287.72,"end_time":287.861},{"word":"the","start_time":287.901,"end_time":287.981},{"word":"image","start_time":288.101,"end_time":288.382},{"word":"here","start_time":288.443,"end_time":288.683},{"word":"and","start_time":288.944,"end_time":289.065},{"word":"this","start_time":289.185,"end_time":289.346},{"word":"is","start_time":289.426,"end_time":289.506},{"word":"the","start_time":289.566,"end_time":289.667},{"word":"image","start_time":289.827,"end_time":290.128},{"word":"hosted","start_time":290.228,"end_time":290.61},{"word":"on","start_time":290.63,"end_time":290.69}],"alternatives":[],"language":"en"},{"transcript":" Cloudinary and so we have now seen how you can use react drop zone for the drag and drop and","confidence":0.8119499999999998,"words":[{"word":"Cloudinary","start_time":290.891,"end_time":291.433},{"word":"and","start_time":291.674,"end_time":291.814},{"word":"so","start_time":291.975,"end_time":292.155},{"word":"we","start_time":292.196,"end_time":292.296},{"word":"have","start_time":292.336,"end_time":292.497},{"word":"now","start_time":292.537,"end_time":292.718},{"word":"seen","start_time":292.818,"end_time":293.059},{"word":"how","start_time":293.119,"end_time":293.26},{"word":"you","start_time":293.3,"end_time":293.42},{"word":"can","start_time":293.46,"end_time":293.621},{"word":"use","start_time":293.761,"end_time":293.882},{"word":"react","start_time":293.942,"end_time":294.283},{"word":"drop","start_time":294.303,"end_time":294.544},{"word":"zone","start_time":294.564,"end_time":294.705},{"word":"for","start_time":294.745,"end_time":294.886},{"word":"the","start_time":294.906,"end_time":295.006},{"word":"drag","start_time":295.046,"end_time":295.387},{"word":"and","start_time":295.488,"end_time":295.568},{"word":"drop","start_time":295.628,"end_time":295.949},{"word":"and","start_time":295.97,"end_time":296.09}],"alternatives":[],"language":"en"},{"transcript":" the Cloudinary API for uploading and hosting our image next up let's see how to create a","confidence":0.7661764705882352,"words":[{"word":"the","start_time":296.15,"end_time":296.21},{"word":"Cloudinary","start_time":296.231,"end_time":296.733},{"word":"API","start_time":296.833,"end_time":297.295},{"word":"for","start_time":297.375,"end_time":297.536},{"word":"uploading","start_time":297.636,"end_time":298.138},{"word":"and","start_time":298.238,"end_time":298.319},{"word":"hosting","start_time":298.359,"end_time":298.801},{"word":"our","start_time":298.981,"end_time":299.082},{"word":"image","start_time":299.182,"end_time":299.463},{"word":"next","start_time":299.664,"end_time":299.825},{"word":"up","start_time":299.945,"end_time":300.066},{"word":"let's","start_time":300.106,"end_time":300.267},{"word":"see","start_time":300.287,"end_time":300.387},{"word":"how","start_time":300.427,"end_time":300.588},{"word":"to","start_time":300.608,"end_time":300.728},{"word":"create","start_time":300.789,"end_time":301.07},{"word":"a","start_time":301.09,"end_time":301.11}],"alternatives":[],"language":"en"}]