Click here to Skip to main content
15,850,685 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionHow to cancel a drag event Pin
jkirkerx18-Sep-18 10:25
professionaljkirkerx18-Sep-18 10:25 
AnswerRe: How to cancel a drag event Pin
Richard Deeming18-Sep-18 11:53
mveRichard Deeming18-Sep-18 11:53 
GeneralRe: How to cancel a drag event Pin
jkirkerx18-Sep-18 12:54
professionaljkirkerx18-Sep-18 12:54 
Questioncouldn't read from datalist Pin
thepast16-Sep-18 22:01
thepast16-Sep-18 22:01 
QuestionHow to pass JavaScript output to an HTML String Variable outside the <script>? Pin
Member 1348136115-Sep-18 16:45
Member 1348136115-Sep-18 16:45 
AnswerRe: How to pass JavaScript output to an HTML String Variable outside the <script>? Pin
Richard Deeming18-Sep-18 4:45
mveRichard Deeming18-Sep-18 4:45 
QuestionTrouble uploading files with aws s3 Pin
Member 1398382813-Sep-18 14:15
Member 1398382813-Sep-18 14:15 
AnswerRe: Trouble uploading files with aws s3 Pin
jkirkerx1-Oct-18 9:04
professionaljkirkerx1-Oct-18 9:04 
I think your problem starts here at the very beginning on the file upload process.
// var file = evt.target.files[0]; <-- havent used this yet but I know its for upload
What this line does:
it allows you to attach to the selected file to upload. You can get the file name, file data, file type here.
depending on the select method, you want to get your files by using

Drag and drop
event.target.items || event.dataTransfer.items
Select
event.target.files

So with a select button, your code would be similar to this:
onSelect(event: any) {

const files       = event.target.files,
      file        = files[0],
      fileType    = file.type,
      fileName    = file.Name,
      reader      = new FileReader;
}

You have the option to grab the image data as well using the FileReader
If you want to read the file data, you add an event listener and use the FileReader.
This will get the image as a base64 string, that you can update the image preview without modification, straignt to the "src".
You can read up on reader.readAsDataUrl and see that there are more options.
// Get the image blob from the file selected.
let b64Image = '';                             // A place outside the event to store the data
this.imageType = file.type;                    // Grab the image type for use elseehere
reader.addEventListener('load', function () {  // Tell the reader what to do after reading the data
    b64Image = reader.result.toString();       // Grab the Base64 string
    dI.setAttribute('src', b64Image);          // Set the Base64 in the image preview element object
    b64.setAttribute('value', b64Image);       // Set the Base64 in a hidden textbox, that can be http posted
}, false);

reader.readAsDataURL(file);                    // Read the data, then use the data as described above.

After this you on your own. I would just create a model for the record that includes the image, and use http post to contact your NodeJS code to accept the model and write it. I havn't written anything in React yet but this is TypeScript, which is similar to JavaScript and React.

My opinion, your AWS code seems really complicated and over kill for just passing image data
If it ain't broke don't fix it
Discover my world at jkirkerx.com

Questiongetting error period.draggable is not a function Pin
Gopal Kan12-Sep-18 20:49
Gopal Kan12-Sep-18 20:49 
AnswerRe: getting error period.draggable is not a function Pin
Graham Breach12-Sep-18 22:08
Graham Breach12-Sep-18 22:08 
QuestionModal popup with datalist Pin
thepast12-Sep-18 9:18
thepast12-Sep-18 9:18 
QuestionJavascript and extensions Pin
Member 1398114211-Sep-18 16:10
Member 1398114211-Sep-18 16:10 
QuestionWhen pressing right and left keys object not moving in javascript game. Pin
Member 1396097131-Aug-18 12:10
Member 1396097131-Aug-18 12:10 
QuestionAngular 6, lazy loading, with routerLink="/reviews" it works, type the Url localhost:5000/reviews and page not found Pin
jkirkerx17-Aug-18 14:06
professionaljkirkerx17-Aug-18 14:06 
AnswerRe: Angular 6, lazy loading, with routerLink="/reviews" it works, type the Url localhost:5000/reviews and page not found Pin
jkirkerx18-Aug-18 14:31
professionaljkirkerx18-Aug-18 14:31 
General[Solved] Pin
jkirkerx20-Aug-18 10:25
professionaljkirkerx20-Aug-18 10:25 
QuestionCoding Newbie Pin
Rokas Steiblys17-Aug-18 11:21
Rokas Steiblys17-Aug-18 11:21 
AnswerRe: Coding Newbie Pin
Richard MacCutchan17-Aug-18 22:37
mveRichard MacCutchan17-Aug-18 22:37 
AnswerRe: Coding Newbie Pin
Nathan Minier20-Aug-18 2:34
professionalNathan Minier20-Aug-18 2:34 
SuggestionRe: Coding Newbie Pin
Member 1395671021-Aug-18 7:28
Member 1395671021-Aug-18 7:28 
QuestionExsplicit JavaScript regular exspression Pin
calmchess16-Aug-18 14:17
calmchess16-Aug-18 14:17 
AnswerRe: Explicit JavaScript regular expression Pin
Richard Deeming17-Aug-18 8:02
mveRichard Deeming17-Aug-18 8:02 
QuestionUsing data from odata in react-native Pin
Mike V Baker12-Aug-18 17:59
Mike V Baker12-Aug-18 17:59 
AnswerRe: Using data from odata in react-native Pin
Richard MacCutchan12-Aug-18 22:03
mveRichard MacCutchan12-Aug-18 22:03 
QuestionWeb Application Pin
Awal Swed9-Aug-18 5:35
Awal Swed9-Aug-18 5:35 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.