פתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?

אהרן

@dovid
לאיזה פורמט צריך לרנדר קובץ docx ?

dovid

@אהרן אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

@dovid
לאיזה פורמט צריך לרנדר קובץ docx ?

מה הכונה צריך? מי צריך?

אהרן

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

מה הכונה צריך? מי צריך?

בשביל להעלות את הקובץ לשרת.

מהכתבה שהבאת הבנתי שאוביקט הfile מחזיק רק מידע על הקובץ, ובשביל לשלוח את הקובץ עצמו צריך לרנדר (=לקרוא) את אותו ואז אפשר לשלוח את תכולתו.

אז הנחתי שצורת הרנדור יכולה להשפיע על תכולת הקובץ, ואם אבחר בצורה הלא נכונה, השרת לא יצליח לקרוא את הקובץ.

הבנתי נכון?

כך כתבתי את הקוד:

<textarea drop-zone upload-data="vm.uploadData" ng-model="vm.uploadData.text"

    .directive('dropZone', ['$http', function($http){
    	return {
		    scope: {
		    	uploadData: '=',
		    },
		    link: function (scope, element, attrs) {
	
				element.bind("drop", function (e) {
					e.stopPropagation();
					e.preventDefault();
					let file = e.dataTransfer.files[0];
					scope.uploadData.fileObj = file;
					
					var reader = new FileReader();
						//reader.onload = function( theFile ) {
					reader.onloadend = function( theFile ) {
						scope.uploadData.contentFile = reader.result;
					}
                                        reader.readAsBinaryString(file)
					scope.$apply()
				});
				
				element.bind("dragover", function (e) {
					e.stopPropagation();
					e.preventDefault();
					e.dataTransfer.dropEffect = 'copy';
				});
			}
		}
	}]);

האם הכתיבה והאנלוגיה נכונה?

אהרן

ואז אחרי שיש את תוכן הקובץ (ופרטים נוספים שמכניסים בשדות יעודיים), לוחצים על האינופוט "צור פרויקט), ששולח הכל לשרת.
לאינפוט מוצמד ארוע קליק שיושב על הקונטרולר

		function makeNewProject () {
			$http({
				method: 'POST',
				url: 'serverUrl',
				data: {
					projectName: 'myProject',
					data: vm.uploadData.contentFile,
				}
			}).then( function( res ){
			}, function(errRes){
				serverError();
			});
		}

dovid

לא, אתה טועה.
בשביל להעלות קובץ לא צריך לרנדר שום דבר. רק בשביל לנתח או להציג אותו בצד הלקוח עצמו.

אהרן

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

לא, אתה טועה.
בשביל להעלות קובץ לא צריך לרנדר שום דבר. רק בשביל לנתח או להציג אותו בצד הלקוח עצמו.

אז איך שולחים
את אוביקט הקובץ?

dovid

@אהרן אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

לא, אתה טועה.
בשביל להעלות קובץ לא צריך לרנדר שום דבר. רק בשביל לנתח או להציג אותו בצד הלקוח עצמו.

אז איך שולחים
את אוביקט הקובץ?

כן, בFormData אפשר לכלול את אובייקט הקובץ והדפדפן מעלה אותו כמו בform פשוט.

אהרן

משום מה, מגיע לשרת אוביקט ריק

				data = new FormData();
				data.append('file', vm.uploadData.fileObj);
				console.log(data)
			$http({
				method: 'POST',
				url: url,
				data: { data: data },
				headers: { 'Content-Type': undefined}
			}

משהו פה לא נכון?

dovid

תצרף גם מה שהודפס בconsole.log.
(אגב למה שמת 'Content-Type': undefined ?, אולי זה הבעיה?)

אהרן

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

(אגב למה שמת 'Content-Type': undefined ?, אולי זה הבעיה?)

לא, זה אחד הנסיונות לתקן את הבעיה.

זה הקוד בסרוור

app.post('/xxx/ajax/createNewProject', createNewProject);
    
    function createNewProject( req , res ) {
    'use strict';
    console.log('createNewProject')
        
        let body = req.body;
        console.log( body.data )
        console.dir( body )

הלוג:

undefined
{}

dovid

בקוד שלך היה console.log(data)
ביקשתי את הפלט שלו.

אהרן

@dovid

FormData {}__proto__: FormData

אהרן

כשאני מדפיס console.log(vm.uploadData.fileObj) זה גם נראה בסדר

File(110866) {name: "חדשושן.docx", lastModified: 1520200202739, lastModifiedDate: Sun Mar 04 2018 23:50:02 GMT+0200 (שעון רגיל ירושלים), webkitRelativePath: "", size: 110866, …}
lastModified
:
1520200202739
lastModifiedDate
:
Sun Mar 04 2018 23:50:02 GMT+0200 (שעון רגיל ירושלים) {}
name
:
"חדשושן.docx"
size
:
110866
type
:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document"
webkitRelativePath
:
""
__proto__
:
File

אהרן

עד עכשיו השתמשתי ב

app.use(express.bodyParser());

אבל עכשיו זה מחזיר שגיאה

Error: invalid json

אז החלפתי לזה:

var bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));

וגם פה קבלתי שגיאה

PayloadTooLargeError: request entity too large

אין לי כבר כח

zvizvi

@אהרן אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

request entity too large

המלצה שלי להשתמש בmulter עבור העלאת קבצים.

https://github.com/expressjs/multer

dovid

הconsole בצד הלקוח אמר את דברו. אם הFormData מקבל File תקין, אז "האשמה" מתגלגלת לפתחו של צד השרת. אכן, חיפוש בגוגל של expressjs receive input file מעלה שזה לא עובד בדרך הזו.
נסה את המלצתו של @zvizvi.

אהרן

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

נסה את המלצתו של @zvizvi.

body מגיע אנדיפיינד
אוף!!

dovid

@אהרן אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

@dovid אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

נסה את המלצתו של @zvizvi.

body מגיע אנדיפיינד
אוף!!

במקום אוף תביא קוד. ולמה אתה חושב שהכל מובן מאליו? רק במקרוסופט או אנגולר יש כזו אידליה. בפרימוורקים כמו אקספרס אתה חייב לקחת שליטה על כל דבר שזז.

אהרן

				<textarea drop-zone upload-data="vm.uploadData" ng-model="vm.uploadData.text"
				class="one"
				placeholder="גררו לכאן את הקובץ הרצוי,&#10או הדביקו כאן את הטקסט"
				/>

				<button ng-click="vm.createNewProject()" >
					צור פרויקט
					<span ng-if="vm.uploadData.projectName">"{{vm.uploadData.projectName}}"</span>
				</button>

    .directive('dropZone', ['$http', function($http){
    	return {
		    scope: {
		    	uploadData: '=',
		    },
		    link: function (scope, element, attrs) {
	
				element.bind("drop", function (e) {
					e.stopPropagation();
					e.preventDefault();
					let file = e.dataTransfer.files[0];
					
					if (file.name.indexOf('.txt') != -1)
						scope.uploadData.type = 'txt';
					if (file.name.indexOf('.docx') != -1)
						scope.uploadData.type = 'docx';
						
					if( !scope.uploadData.type )
						return alert('לא קובץ docx / txt');
						
					if( scope.uploadData.text )
						return alert('יש כבר טקסט')

						
					scope.uploadData.fileObj = file;
				});
				
				element.bind("dragover", function (e) {
					e.stopPropagation();
					e.preventDefault();
					e.dataTransfer.dropEffect = 'copy';
					//console.log('dragover')
					//console.log(e)
				});
			}
		};
	}]);

	function createNewProject () {
			
		if( vm.uploadData.text )
			vm.uploadData.type = 'text'
			
		if( !vm.uploadData.type )
			return alert('אין תוכן לפרק')

		if( !vm.uploadData.projectName )
			return alert('אנא הגדר את שם הפרויקט')
			
		let upData = false;
		upData = new FormData();
		upData.append('file', vm.uploadData.fileObj);
		upData.append('file2', 'ddd');
		console.log(upData)
		console.log(vm.uploadData.fileObj)
		for(let t of upData) {console.log(t)}

		$http({
			method: 'POST',
			url: 'tchumim/ajax/createNewProject',
			data: upData,
			/*headers: { 'Content-Type': undefined}
			headers: { 'Content-Type': 'application/json; charset=UTF-8' },*/
		}).then( function( res ){
		}, function(errRes){
			serverError();
		});
	}
})

אהרן

צד שרת

    const express = require('express');
    const app = express();
    let multer  = require('multer')
    let upload = multer({ dest: 'uploads/' })

    app.post('/tchumim/ajax/createNewProject', upload.single('file'), createNewProject);
    
    function createNewProject( req , res ) {
    'use strict';
    console.log('createNewProject')
        
        let body = req.body;
        console.dir( body )
        console.dir( req.file )

תחומים - פורום חרדי מקצועי

פתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?