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

@dovid

FormData {}__proto__: FormData

@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
{}

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

				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 אמר בפתיחת אלמנט אינפוט פייל ע"י לחיצה על דיב שממוקם מעליו, אפשרי?:

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

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

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

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

@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';
				});
			}
		}
	}]);

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

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

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

תקרא את המאמר הזה: https://www.html5rocks.com/en/tutorials/file/dndfiles/
בסבלנות שלב אחרי שלב. אם יש שאלה ספציפית שאל.

תודה רבה!
למעשה עשיתי נכון, רק שבדקתי א"ז ע"י הדפסת האוונט לקונסול, ושם המאפיין פייל היה ריק
רק אם אני שומר א"ז קודם
var files = e.dataTransfer.files;
המידע על הקובץ נשמר.

אגב, ממש מסקרן מדוע אתר התמיכה של נטפרי משתמש במאפיין items בזמן שאצלי הוא תמיד ריק, איך זה בכלל עובד<

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

אפשרי?

כאן (ב-file1) די הצלחתי
הענין שבגלל האינפוט, א"א לגשת עם העכבר מעבר לשורה הראשונה.

מישהו יודע על פתרון?

איך עובד צירוף הקבצים לפניות של נטפרי (הרכיב באמצעותו מצרפים את הקובץ)?
אני רואה שיש שם אינפוט פייל עם התניה שלא מתקיימת, כלומר האינפוט לא קיים
אז איך הוא מקבל את שם הקובץ בלי האינפוט הזה?

אני רוצה לעשות תיבת טקסט דומה לג'ימייל שאפשר להעתיק לשם טקסט וגם לגרור קובץ
זו הדרך?
אפשרי?

@dovid אמר בקבלת textContent באנגולר:

א. הנה למה הדיירקטיב מונע קריאה כפולה
https://plnkr.co/edit/c3dlfTkazy3LrHt751RP

תודה רבה!!
לקח זמן להבין אבל היה שווה!!!

ועכשיו להסבר
ככל שהתחום גדול יותר, נוצרים יותר שינוים שגורמים לאנגולר לעבור על הכל שוב?

עובד
https://plnkr.co/edit/ykipnfSFjIHzjuPbjpU6?p=preview

הנה הדוגמא
https://plnkr.co/edit/X4hbFD6vCoNBPQWDEk4C?p=preview

@chagold
מסקרן אותי צורת העבודה שלך
כשתמחוק\תוסיף\תזיז את האוביקט, תמספר שוב את כל האוביקטים?

שאלה נוספת:
באם אין צורך של ממש לכימוס האלמנט
(כמו בדוגמא שלנו, שבזכות המצביע לאוביקט במערך אני שומר עליו הכל)
דיירקטיב גונב ביצועים כי הוא משכפל יותר מופעים של המתודות והמאפיינים של הקונטרולר?

עד קצת מאמץ ואבין את העקרונות

@dovid אמר בקבלת textContent באנגולר:

אחד המעלות של הדיירקטיב, שיש לך איזור סגור בו אתה יכול לטעון את מה שצריך ולשמור בלי ש"יתערבב" אם שאר הקוד.

למה זה אוטונומיה נפרדת, כי את כל מופע של האלמנט עוטף סקופ פרטי (וכן מופע קונטרולר שמוכנס לדיירקטיב)?

@dovid אמר בקבלת textContent באנגולר:

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

לא מבין מדוע בדיירקטיב אנגולר לא יצטרך לקרוא לפונקציה פעמיים לעומת בקונטרולר.

@dovid
זהו שאני מתחבט איך מודדים
מה נקרא להתעסק עם קטנות ומהו חסכון מומלץ

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

מה אומר

לכאורה הפתרון פשוט
בתוך פונקציה נשמור את התוצאה על מאפיין של האלמנט.